vue通过extend动态创建全局组件（插件）学习小记

测试环境:nodejs+webpack，例子是看文章的，注释为自己的理解

创建一个toast.vue文件：

 

创建一个toast_index.js

 

import vue from 'vue'
import toastComponent from './toast'

//使用vue的extend，以vue文件为基础组件，返回一个可以创建vue组件的特殊构造函数
const ToastConstructor =  vue.extend(toastComponent)

function showToast(text,duration = 2000){
    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},duration)
}

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

export default registryToast

 

最后一步，在入口js文件中：

import toastRegistry from './components/toast_index.js'//用这个方法注册组件，所有vue页面都可以使用，不用再import
//定义全局组件生成的有2个种方法，一种myPlugin={install(){...}},一种function myPlugin(){....}
//vue.use方法内部，会判断toastRegistry，如果是函数就直接执行，如果是object则执行它的install对象
//导为导入的toastRegistry是一个函数，所以也可以直接执行toastRegistry()

Vue.use(toastRegistry)

 

在任何vue文件中使用它：

改传输到子组件的值

showToast(){
    this.$toast('哈哈哈哈');
}

 

 

总结：

• 创建的组件的dom结构，直接在body底部插入，在vue的app实例范围外，创建 之后，但组件仍然可以响应组件内的数据
• 用来创建组件的基础vue文件内的data数据会被继承

转载于:https://www.cnblogs.com/vbyzc/p/9040398.html