使用Vue.extend()创建动态组件并在全局注册

        工作闲暇之余想着自己学习点新知识，于是又开始鼓捣起新的小项目。之前使用elementUI时一个alert弹窗直接使用this.$alert就能解决，这次自己从头开始，也想着做一套自己的小组件，所以首先就从全局的alert弹窗开始吧。

        this.$alert使用起来很简单是因为$alert绑定在vue.prototype上，所以全局都可以直接使用。我也准备仿照这个用法，通过函数指令传入参数，动态创建alert弹窗。

        首先，我们得有一个弹窗组件，所以在components文件夹下新建一个alertPop的文件夹，然后创建一个alertPop.vue文件。之后就像一般组件一样编写，通过Props接收传入的参数。这里我尝试传入弹窗头部标题以及提示信息。然后组件编写完成我们可以先在局部引用进行测试以及样式调整。

alertPop.vue中的props

        测试完成后，我们可以进行组件的挂载和创建了。这里主要使用了Vue.extend(options) + $mount的方法，官网地址如下Vue-extend。根据官方定义可知，Vue.extend是一个全局API，使用基础构造器，创建一个“子类”。传入的参数是一个对象，里面包含组件的信息。其实到这里我也不是很明白，但是我看到用法之后就可以理解一些了。

alert.js文件

        首先我们在alertPop文件夹下再创建一个alert.js的文件，然后在文件中引入alertPop.vue以及Vue。使用Vue.extend(alertPop)创建一个Alert类。之后定义alert方法，传入的参数即Props对应的数据。在这个方法中，我们可以new一个Alert的实例，这个实例其实就是弹窗对象。但此时因为组件还未挂载所以还没有$el。从此时在控制台打印的组件的生命周期也可以看出，组件只执行了beforeCreate和created钩子，并未进入挂载。我们手动执行$mount()之后，组件成功挂载，取到组件的$el，利用document.body.apendChild()方法可以将弹窗添加到页面。

        在new Alert()的时候可以传入参数propsData，就是对应传入组件中的props。那弹窗消失如何实现？当然我们可以在点击确定按钮的时候绑定方法，之后在通过弹窗对象将方法重写，此时点击确定按钮，就会调用removeChild()将弹窗移除，$destroy()方法销毁弹窗实例（注意改写方法要在挂载之前，否则改写不生效）。在弹窗消失时我们也可以给他添加一个回调函数，以便后续操作。

        此时我们已经可以通过调用alert函数进行弹窗操作，但我们想要全局使用它还需要一个步骤。在根文件夹下新建plugins文件夹，创建plugin.js文件。在文件中引入我们刚刚写好的函数，并定义一个注册函数，在函数中将alert方法赋值给Vue.prototype.$alert，之后在main.js引入Plugin.js，使用Vue.use(Plugin)即可完成注册。

plugin.js文件

main.js文件

        之后我们就可以在组件中使用this.$uAert()调用我们的弹窗，效果如下：

调用this.$uAlert()

弹窗.jpg