弹窗组件我们经常会提到第三方组件，或者写的不是很笼统，只能在单独的页面显示。优雅的写vue的自定义弹窗组件吧。实现弹窗组件的特点是独立存在于当前vue实例之外，不能写在当前业务dom中，所以样式不易控制，通用性比较差。一般挂载在body上，通过js动态生成和注销。这里有一个知识点，需要我们对实例创建和实例挂载有一定的了解。下面写一个简单的例子。Create函数首先，我们需要明确要做什么：1.创建一个create函数。2.传入一个组件的配置（组件显示自身及其props参数）。3.创建它的一个实例并将它挂载到body上。4.最后返回组件实例。importVuefrom'vue'//Component是传入的组件，props是传入的组件参数exportdefaultfunctioncreate(Component,props){//创建一个实例，每个vue项目的入口文件都会用到它不具体解释//$mount()的本质是将虚拟dom转化为真实dom，这一点很重要constvm=newVue({render(h){returnh(Component,{props})}}).$mount()//通过vm.$el获取生成的dom，将生成的真实dom插入到body中document.body.appendChild(vm.$el)//获取根组件实例（这里不懂的可以阅读上一篇vue通讯百科)constcomp=vm.$children[0]//弹窗关闭时调用comp.remove=()=>{//移除自身document.body.removeChild(vm.$el)//释放你所占用的资源vm.$destroy()}//返回创建的实例returncomp}看完上面的代码，很多人会问两个问题。1、我们在初始化$mount绑定到id为app的dom节点，所以如果我们想绑定到body上，直接写成$mount('body')即可，这样就不需要了使用js来appendChild。答案是否定的，因为官网明明说这种方法是为了覆盖dom中的所有内容，所以是行不通的。但是$mount()的本质是将虚拟dom转化为真实dom，这一点很重要。2、也有同学会说extend方法也可以创建和挂载组件实例。对，下面来实现一下。importVuefrom'vue'exportdefaultfunctioncreate(Component,props){//vue.extend()获取创建实例constCtor=Vue.extend(Component)//创建组件实例，然后获取虚拟dom，howConverttorealdomconstcomp=newCtor({propsData:props})//这个就是上面说的$mount的函数comp.$mount()//挂在body上，就是comp的domdocument.body。appendChild(comp.$el)comp.remove=()=>{//移除自己document.body.removeChild(comp.$el)//释放资源comp.$destroy()}returncomp}像这样是吗更容易写。IncomingDisplayComponent简单记下下面传入的显示组件，也就是上面的Component参数。这里就不细说了，比较简单。 {{message}}{{title}}
