Mixin 混入

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

怎么理解呢，就是每一個組件都會有一些選項 data、computed、methods …對吧，假設(shè)我有 10 個組件，每一個組件內(nèi)都有一個相同的 methods 方法，那我就將這個可復(fù)用的方法抽離到 mixin 文件中，然后在引入進來。這樣我就不需要每個組件都編寫重復(fù)的 methods 方法了，data、mounted 等等的選項也是如此。

基礎(chǔ)案例

hello-world.vue

<template><div class="home">{{ name }}</div>
</template><script>
import mixin from './mixin.js'export default {mixins: [mixin],data() {return {}}
}
</script>

mixin.js

export default {data() {return {name: 'xiaoming'}}
}

預(yù)覽效果

選項合并

因為混入會把它本身的選項和組件的選項一起合并，那么也就是說會發(fā)生一些沖突，例如混入中的文件含有 name 屬性，而組件的選項 data 中也存在 name 屬性，那頁面渲染的時候會以哪個為準呢？接下來進行測試一下。

hello-world.vue

<template><div class="home">{{ name }}</div>
</template><script>
import mixin from './mixin.js'export default {mixins: [mixin],data() {return {name: 'libai'}}
}
</script>

mixin.js

export default {data() {return {name: 'xiaoming'}}
}

預(yù)覽效果

可以看出來是以組件選項的為準，這里只舉例了選項 data 的沖突，其他選項 methods、computed、mounted 也是如此，小伙伴們可以自行去測試一下。在開發(fā)的時候需要多留意一下沖突的情況。

原文鏈接：菜園前端