>[success] # 封装一个Alert 组件 * 想做出来的效果 ![](https://img.kancloud.cn/06/29/06293bc4087507d81788f7697a833e6b_418x75.png) [本节笔记文章参考,更多细节可以参考这篇文章](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 注释标准如图 ~~~ ![](https://img.kancloud.cn/e9/5a/e95a6151d1f47c1e48576fdc7571a6fb_753x238.png) >[danger] ###### 明确我们要做的 ~~~ 1.我们的组件要在boby层这样就不会出现有可能被其它组件遮挡 2.我们的组件也要有一个content 用来展示信息的属性 3.我们也要有一个duration 可以设置时间 ~~~