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數據會被繼承