>[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 可以设置时间 ~~~