Vue中的Mixin理解

2021-09-29 12:11:24 字數 1308 閱讀 6985

當有不同元件的選項存在相同處理時,vue為我們提供了一種叫做mixin的混入功能。

它通過遞迴操作,將mixin物件上的選項與元件中的選項合併,避免了元件間相同處理的**冗餘。

下面,我在專案中建立了乙個叫做comment的元件,然後將此元件作為另乙個元件mixin選項後,新元件就完全複製了comment元件的功能。

...<

/template>

import writecontent from

"../components/writecontent"

;export

default;}

, computed:

,created()

, methods:

, components:};

<

/script>

...<

/template>

<

/template>

export

default

;<

/script>

上面兩個元件的template內容完全相同,只是mixin元件內部選項只設定了mixins為comment,最終的效果即mixin元件完全複製了comment元件的功能。

資料物件在內部會進行遞迴合併,並在發生衝突時以元件資料優先。

//comment元件的script

export

default;}

};//mixin元件的script

import mcomment from

"../components/comment"

;export

default}}

;

混入後,效果為:

//定義全域性混入,將每個元件的生命週期,輸出到控制台

vue.

mixin(}

)//mixin元件定義

vue中混入mixin的理解與使用

混入 mixin 提供了一種非常靈活的方式,來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時。所有混入物件的選項將被混合進入該元件本身的選項。mixin 的作用就是實現將多個元件或頁面中公用的屬性或方法抽取出來單獨定義在 mixins 中,當元件中同時宣告了...

Vue中Mixin的用法

混入 mixin 提供了一種非常靈活的方式,來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被 混合 進入該元件本身的選項。定義乙個混入物件 var mymixin methods 定義乙個使用混入物件的元件 var component...

Vue應用中混入 mixin 的理解和使用

有兩個非常相似的元件,他們的基本功能是一樣的,但他們之間又存在著足夠的差異性,此時的你就像是來到了乙個分岔路口 我是把它拆分成兩個不同的元件呢?還是保留為乙個元件,然後通過props傳值來創造差異性從而進行區分呢?兩種解決方案都不夠完美 如果拆分成兩個元件,你就不得不冒著一旦功能變動就要在兩個檔案中...