vue动态挂载组件

vue动态挂载组件，比如弹窗组件

1. main.js:

首先创建公共js,并引入

import common from '@/utils/common'
Vue.use(common)

2. confirmDialog.vue:

然后写组件的样式和方法

3. common.js:

最后动态挂载组件

export default {
  install(Vue) {
    this.methods(Vue)
  },
  methods(Vue) {
    // 弹窗组件
    Vue.prototype.$confirmDialog = async(obj = null) => {
      if (!obj) return
       const confirmDialog = (await import('@/components/dialog/confirmDialog.vue')).default
      // const comp = new (Vue.extend(confirmDialog))({ propsData: props }).$mount()
      const ConfirmDialogCom = Vue.component('confirmDialog', confirmDialog)// 创建组件
      const confirmDialogComNew = new ConfirmDialogCom()// 创建组件实例（可以传递参数 { propsData: props }）
      const comp = confirmDialogComNew.$mount()//  挂载是为了把虚拟dom变成真实dom
      document.body.appendChild(comp.$el)// 挂载组件
      comp.$watch('centerDialogVisible', (value) => { // 监听组件是否不显示，并删除组件、销毁组件
        if (!value) {
          document.body.removeChild(comp.$el)
          comp.$destroy()
        }
      }, { deep: true })
      return comp.showDialog(obj)
    }
    Vue.prototype.$Other = (Component, props) => {
      const vm = new Vue({
        // h是createElement函数，它可以返回虚拟dom
        render(h) {
          console.log(h(Component, { props }))
          // 将Component作为根组件渲染出来
          // h(标签名称或组件配置对象，传递属性、事件等，孩子元素)
          return h(Component, { props })
        }
      }).$mount() // 挂载是为了把虚拟dom变成真实dom
      // 不挂载就没有真实dom
      // 手动追加至body
      // 挂载之后$el可以访问到真实dom
      document.body.appendChild(vm.$el)
      console.log(vm.$children)
      // 实例
      const comp = vm.$children[0]
      // 淘汰机制
      comp.remove = () => {
        // 删除dom
        document.body.removeChild(vm.$el)

        // 销毁组件
        vm.$destroy()
      }

      // 返回Component组件实例
      return comp
    }
  }
}

4. 使用

this.$confirmDialog({

title: '温馨提示',

style: { 'text-align': 'center' },

content: '保存后优惠券信息将无法二次编辑，请仔细核对！',

cancelText: '再次核对',

confirmText: '确定提交',

success: (res) => {

  if (res.confirm) {

    this.submitAdverForm(1)

  }

}

})