首先是官方定義：混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能，一個混入物件可以包含任意組件選項，當組件使用混入物件時，所有混入物件的選項將被“混合”進入該組件本身的選項，
通俗來講，就是 mixin 中的屬性，比如 data、methods 或者自定義屬性，將被混入到全部或者指定的組件中，讓這些組件可以呼叫 mixin 中所定義的屬性或者事件
全域 mixin
首先，我們直接定義全域的 mixin
// 定義全域 mixin
app.mixin({
message: 'mixin',
data() {
return {
count: 100,
};
},
});
混入 data
全域mixin默認會混入所有組件中，接下來，我們再定義一個組件，模板中插入 message 欄位，如下所示：
const app = Vue.createApp({
template: `
<div>{{message}}</div>
`,
});
此時mixin中的data屬性將會混入到組件中，雖然組件的 data 中并沒有包含 message 欄位，但是在運行的頁面中依然顯示出 message 的值 mixin message，現在，我們在組件內部的 data 中也添加 message 欄位，
const app = Vue.createApp({
data() {
return {
message:'app message'
}
}
...
});
這時候，運行頁面，模板中的內容將顯示組件中 data 里的值 app message，這說明，組件內部 data 的優先級是高于 mixin 內部 data 的優先級的，
混入事件（methods）
同樣的，我們也可以一下測驗事件的優先級
const app = Vue.createApp({
...
methods: {
handleClick() {
console.log('app click');
}
},
// 這里點擊元素，會列印出 "app click"
template: "<div @click="handleClick">{{message}}</div>"
});
// 定義全域 mixin
app.mixin({
...
methods: {
handleClick() {
console.log('mixin click');
}
}
});
點擊div，將會列印出 app click ，這說明當 mixin 中和組件中都存在 handleClick 事件時，組件中同名事件優先級會比較高，
混入生命周期函式（created、mounted 等）
下面，我們同時在 mixin 和 app 中定義 created 函式
const app = Vue.createApp({
...
created() {
console.log("app created");
}
});
// 定義全域 mixin
app.mixin({
created() {
...
console.log("mixin created");
}
});
運行此頁面，列印臺會輸出
mixin created
app created
也就是說，mixin中的生命周期鉤子函式與 app 組件中的鉤子函式都會運行，mixin 優先執行
混入自定義屬性
我們還可以直接在 mixin 和 app 組件中自定義屬性，自定義屬性在模板中需要用 $options[prop] 的方式呼叫
const app = Vue.createApp({
message: "app message",
template: "<div @click="handleClick">{{$options.message}}</div>"
});
// 定義全域 mixin
app.mixin({
message: "mixin message"
});
運行頁面，模板將會展示 app 組件中 message 中的值 app message ，可見，自定義屬性也是組件比 mixin 優先級高，
修改自定義屬性合并策略
如果我們想讓 mixin 的優先級高于組件的優先級，我們可以通過以下代碼進行修改
app.config.optionMergeStrategies.message = (mixinVal, appVal) => {
return mixinVal || appVal;
};
合并策略方法中接受兩個引數，第一個引數為 mixin 自定義屬性值，第二個引數為 app 組件自定義屬性值，用戶可以通過方法判斷來回傳哪個值，來定義自定義屬性的優先級，
上面代碼定義了如果 mixinVal 有值則回傳 mixinValue，否則回傳 appVal，所以模板中顯示的應該的是 mixin message，
區域組件
區域組件的定義，需要顯式宣告進組件內，
// 1. 宣告區域組件變數
const MyMixin = {
data() {
return {
};
},
created() {
console.log('mixin created');
},
methods: {
handleClick() {
},
},
};
// 2. 通過mixins屬性注入到要被混合組件中
const app = Vue.createApp({
mixins: [myMixin]
})
除了需要通過 mixins 屬性注入，其他與全域組件無差異，所以不在單獨闡述，
缺陷
mixin可以將部分組件抽成可重用塊，但是他也有不可避免的問題，
- mixin很容易發生沖突，你會不清晰某個值到底是從 mixin 還是 app 來的，
- 可重用性有限，不能通過傳遞引數修改 mixin 的邏輯，降低了抽象邏輯的靈活性，
總結
這篇文章，我們講了如下幾點：
- mixin的概念及定義
- 混入 data、methods、生命周期函式
- 混入自定義屬性，修改自定義屬性的混合策略
- 全域 mixin 及 區域 mixin 定義方式
- mixin 的缺陷
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/241277.html
標籤：JavaScript
上一篇：Vue概述