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数据会被继承