測試環境: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數據會被繼承