在使用
element-ui的過程中捏境，我相信你在使用到類似this.$message功能的時候妓盲，會覺得這個功能真的非常方便谷遂，不用import入組件超歌，全局都可以調(diào)用砍艾。它就是通過Vue.extend+$mount實現(xiàn)。
擴展實例構(gòu)造器
Vue.extend返回的是一個“擴展實例構(gòu)造器”巍举，也就是一個預(yù)設(shè)了部分選項的 Vue 實例構(gòu)造器脆荷。剛學(xué)的時候?qū)Α皵U展實例構(gòu)造器”這一名詞感覺很疑惑，其實它就像構(gòu)造函數(shù)，構(gòu)造函數(shù)中會事先定義好一些屬性蜓谋，new出來的對象也就默認有構(gòu)造函數(shù)中的屬性梦皮，同理Vue.extend也是如此，看下例：
//DOM
<div id="point"></div>
// 構(gòu)建一個擴展實例構(gòu)造器
var todoItem = Vue.extend({
template: ` <p v-on:click="wordClick"> {{ text }} </p> `,
data() {
return {
text: 'default word'
}
},
methods:{
wordClick(){
console.log('click me')
}
}
})
//實例化一個新的對象并綁定到對應(yīng)的DOM元素上
new todoItem({
data() {
return {
text: 'hello world'
}
}
}).$mount('#point');
todoItem是一個“擴展實例構(gòu)造器”孤澎，預(yù)設(shè)了template届氢，data，methods覆旭，當(dāng)new出一個新的對象的時候退子，新對象也默認擁有這些模塊，同時也可以替換新的屬性型将，非常靈活寂祥。
封裝toast插件
一般在項目開發(fā)過程中，會新建一個plugins文件夾放編寫的插件七兜，一個插件對應(yīng)一個文件夾丸凭，文件夾里包含兩個文件，一個js文件和vue文件腕铸。
屏幕快照 2019-06-23 下午12.27.36.png
toast.vue
<template>
<transition name="message">
<div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
</transition>
</template>
<script>
export default {
name: 'Toast'
}
</script>
<style scoped lang="scss">
...
</style>
在該文件中可以事先寫好toast的DOM結(jié)構(gòu)和對應(yīng)的樣式
toast.js
import Vue from 'vue'
import toastComponent from './toast.vue'
const ToastConstructor = Vue.extend(toastComponent);
function showToast(toastVal='default',time=1000){
let ToastDOM = new ToastConstructor({
el:document.createElement('div'),
data(){
return {
toastVal:toastVal,
toastShow:false
}
}
});
document.body.appendChild(ToastDOM.$el);
ToastDOM.toastShow = true;
let timer = setTimeout(res=>{
clearTimeout(timer);
ToastDOM.toastShow = false;
},time);
}
Vue.prototype.$toast = showToast;
在全局調(diào)用$toast方法就是觸發(fā)了綁定在Vue原型上的showToast方法惜犀，可以將Toast動態(tài)插入到body中，而不用像Component組件一樣狠裹，都要預(yù)先import引入虽界，相比較起來會方便很多。
App.vue
...
mounted() {
this.$toast('這是一個tast彈窗',2000)
},
...
