vue2.x全局api创建函数组件

准备好vue组件
封装调用的方法
全局挂载或者局部调用

下面示例讲解封装函数组件调用方法路径 utils/MLtoast.js


import toast from './index.vue'
import Vue from 'vue'
const ToastConstructor = Vue.extend(toast)
let instance
const MLtoast = function(option) {
  instance = new ToastConstructor({
    data:option
  })
  document.body.appendChild(instance.$mount().$el)
}
export default MLtoast

extend 为vue全局提供的一个api，作用是基于vue构造器，创建一个子类，最终new一个实例，配合 $mount()渲染组件，$el的作用是拿到组件挂载的dom元素,最终挂载到body上.

最终挂载vue原形上进行全局调用

/* main.js */
import Vue from 'vue'
import MLtoast from '@/utils/MLtoast'
Vue.$MLtoast = MLtoast