Vue 全局挂载组件的通用方法：仿elementUI notice

1.文件目录

|--src
|    |--components
|    |    |--notice
|    |    |    |--Notice.vue #Notice组件
|    |--utils
|    |    |--create.js #挂载方法

2.编写Notice组件

3.编写create.js

import Vue from 'vue'

export default function create(Component,props) {
  // 创建实例
  const vm = new Vue({
    render(h) {
      // h为createElement，返回VNode虚拟Node
      return h(Component,{props})
    }
  }).$mount()

  // 手动挂载实例到body
  document.body.appendChild(vm.$el)

  const comp = vm.$children[0]
  // 销毁方法
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  // 返回组件
  return comp
}

4.在main.js中将create挂载到Vue全局

// main.js
import create from "@/utils/create"

Vue.prototype.$create = create

5.调用

import Notice from "@/components/notice/Notice"

export default {
  ...
  methods: {
    ...
    handleNotice() {
      const notice = this.$create(Notice,{
        title: '提示',
        message: 'blablablablablabla',
        duration: 2000
      })
    }
  }
}