>[success] # 封裝一個Alert 組件 * 想做出來的效果  [本節筆記文章參考，更多細節可以參考這篇文章](https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5be69786e51d4504d400e184) ~~~ 1.第一反應 封裝的代碼效果代碼如下： <template> <div> <slot></slot> </div> </template> <script> export default { } </script> <style> </style> // 使用的時候 <Alert v-if="show">這是一條提示信息</Alert> ~~~ * 產生的問題 ~~~ 1.需要額外的 data 來控制 Alert 的顯示狀態； 2.Alert 的位置，是在當前組件位置，并非在 body 下，有可能會被其它組件遮擋。 ~~~ >[danger] ##### 看一下其他組件庫類似的使用 ~~~ 1.直接可以通過事件js 調用組件 methods: { handleShow () { this.$Alert({ content: '這是一條提示信息', duration: 3 }) } } ~~~ >[info] ## 分析 ~~~ 1.因此可以發現其他 組件庫這種類似組件是直接通過js調用，但是這里有個疑問我們寫的組件一般都是由 template、script、style 三個標簽，乍一看并不是一個js對象那是如何使用的呢？ '解答':因為這些組件會被 Webpack 的 vue-loader 編譯，把 template 編譯為 Render 函數，最終就會成為 一個 JS 對象 '延伸' :這里就有一個比較有，如果經常使用vue并且有注釋的好習慣，你會發現在'.vue'文件注釋都是 js 注釋標準如圖 ~~~  >[danger] ###### 明確我們要做的 ~~~ 1.我們的組件要在boby層這樣就不會出現有可能被其它組件遮擋 2.我們的組件也要有一個content 用來展示信息的屬性 3.我們也要有一個duration 可以設置時間 ~~~