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

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

创建一个toast.vue文件：

<template>
    <div class="wrap" v-if="show">
        <div>{{text}}</div>
        <div>{{temp1}}</div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            temp1 : "你好vbyzc"
        }
    }
}
</script>

<style scoped>
    .wrap{
        color:#fff;
        background-color: rgba(0,0,0,0.8);
        padding: 10px;
        position: fixed;
        top:50%;left: 50%;
        border-radius: 10px;;
    }
</style>

 

创建一个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文件中使用它：

<button @click="modifySendvalue">改传输到子组件的值</button>

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

 

 

总结：

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