因?yàn)樵陧?xiàng)目中 mixins(混合)特性使用頻率是很高的 有必要熟練掌握 官方文檔: mixins
混入 (mixin) 提供了一種非常靈活的方式召调，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)蛮浑。當(dāng)組件使用混入對象時(shí)唠叛，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
值得注意的是：混入跟路由組件一樣沮稚，啥都能使用艺沼，data,methods等等
基礎(chǔ)使用
例：
在 src目錄下新建mixins目錄 再新建common.js文件
export const common={
methods:{
sayHello:()=>{
console.log('hello1');
}
}
}
路由組件中使用
<template>
<div class="home">
混入測試
</div>
</template>
<script>
import { common } from "../mixins/common.js"
export default {
name: 'Home',
data(){
return{
count: 0,
isLoading: false,
}
},
mixins:[common], // 引入混入
mounted() {
this.sayHello()
},
}
</script>
這樣就能在瀏覽器控制臺看到打印內(nèi)容，
選項(xiàng)合并
當(dāng)組件和混入對象含有同名選項(xiàng)時(shí)蕴掏，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”障般。比如，數(shù)據(jù)對象在內(nèi)部會進(jìn)行遞歸合并盛杰，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先挽荡。
同名鉤子函數(shù)將合并為一個(gè)數(shù)組，因此都將被調(diào)用即供。另外定拟，混入對象的鉤子將在組件自身鉤子之前調(diào)用。
值為對象的選項(xiàng)逗嫡，例如 methods青自、components 和 directives，將被合并為同一個(gè)對象驱证。兩個(gè)對象鍵名沖突時(shí)延窜，取組件對象的鍵值對。
