vue中對extend的理解

在使用 element-ui的過程中，我相信你在使用到類似 this.$message功能的時候，會覺得這個功能真的非常方便，不用 import入組件，全局都可以調用。它就是通過 Vue.extend + $mount實現。

擴展實例構造器

Vue.extend返回的是一個“擴展實例構造器”，也就是一個預設了部分選項的 Vue 實例構造器。剛學的時候對“擴展實例構造器”這一名詞感覺很疑惑，其實它就像構造函數，構造函數中會事先定義好一些屬性，new出來的對象也就默認有構造函數中的屬性，同理Vue.extend也是如此，看下例：

//DOM
<div id="point"></div>

// 構建一個擴展實例構造器
var todoItem = Vue.extend({
    template: ` <p v-on:click="wordClick"> {{ text }} </p> `,
    data() {
        return {
            text: 'default word'
        }
    },
    methods:{
        wordClick(){
            console.log('click me')
        }
    }
})
//實例化一個新的對象並綁定到對應的DOM元素上
new todoItem({
    data() {
        return {
            text: 'hello world'
        }
    }
}).$mount('#point');

todoItem是一個“擴展實例構造器”，預設了template，data，methods，當new出一個新的對象的時候，新對象也默認擁有這些模塊，同時也可以替換新的屬性，非常靈活。

 

封裝toast插件

一般在項目開發過程中，會新建一個plugins文件夾放編寫的插件，一個插件對應一個文件夾，文件夾里包含兩個文件，一個js文件和vue文件。

 

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結構和對應的樣式

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;

在全局調用 $toast方法就是觸發了綁定在 Vue原型上的 showToast方法，可以將Toast動態插入到body中，而不用像 Component組件一樣，都要預先 import引入，相比較起來會方便很多。

App.vue

...
mounted() {
    this.$toast('這是一個tast彈窗',2000)
},
...

 至此就是對vue中extend的理解