vue.extend()写全局组件（插件）

extend创建的是一个组件构造器，而不是一个具体的组件实例
创建一个myToast.vue文件：

创建一个toast.js

import vue from 'vue'
import myToast from './components/myToast'
//使用vue的extend，以vue文件为基础组件，返回一个可以创建vue组件的特殊构造函数
const ToastConstructor =  vue.extend(myToast)
function showToast(text){
    const toastDom = new ToastConstructor({
        el : document.createElement('div'),
        data(){
            return {
                text:text,
                show:true
            }
        }
    })

　　//在body中动态创建一个div元素，后面自动会把它替换成整个vue文件内的内容
    document.body.appendChild(toastDom.$el)
    setTimeout(() => {toastDom.show=false},2000) //显示后2秒就消失
}

function registryToast (){
    //把showToast这个方法添加到uve的原型中，可以直接调用，当调用的时候就是执行函数内的内容
    vue.prototype.$toast = showToast
}

export default registryToast

在入口js文件中：

import toastRegistry from './toast.js'
Vue.use(toastRegistry)

点击按钮调用某个方法中调用this.$toast('哈哈哈哈'); 效果如下