Vue 初心者筆記 #23 使用 Extend 擴展單個元件

本文介紹 Vue.extend 的使用情境與使用方式。

使用情境

假設有數個元件,它們的差異非常小,只有少部分的不同的話,可以使用 Vue.extend() 方法。

使用方法

STEP 1:延伸使用

  1. 將原本 childOne 元件的內容貼到 Vue.extend() 裡面

    1
    2
    3
    var newExtend = Vue.extend({
    // ....元件內容
    });
  2. childOne 元件裡使用 extends 來延伸使用 newExtend

    1
    2
    3
    4
    var childOne = {
    props: ['item'],
    extends: newExtend,
    };

    childOne 就像是把 newExtend 作為基底,來延伸使用。

STEP 2:細部調整

上述提到的延伸使用,當然也可以再做調整。
當引入的元件也有同樣的屬性時,將會以 “元件” 的值為主喔。

例如:childTwo 裡面已經有 template 了,而在延伸使用後,template 會以 childTwo 原先有的值為主。

1
2
3
4
5
var childTwo = {
props: ['item'],
template: '#row-component-two',
extends: newExtend,
};

除此之外,如果在生命週期內執行新的函式,新的函式同樣會執行。
而使用 Extend 時,甚至也能插入新的 data 資料,範例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var childTwo = {
props: ['item'],
data() {
return {
childTwo: '元件2',
extendData: '這段文字是 元件 得到',
};
},
template: '#row-component-two',
extends: newExtend,
mounted() {
console.log('childTwo');
},
};

這也是 Extend 的特色,不僅可以繼承舊的資料結構,還能再加上新的資料內容。

而且新舊資料是可以同時並存的,像是 mounted 會執行兩次,data 的資料結構也是兩個一起存在。

但是,如果我們在 Extend 模板裡宣告的變數或函式,剛好與元件內已有的變數或函式的名稱相同的話,元件原有的內容會覆寫過 Extend 模板裡的值喔,因為 Extend 的權重低於元件本身!

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。