1.mixins和Vue.mixin
- mixins
混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式∑胍混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)畜疾。
這是官網(wǎng)對(duì)混入的解釋，按照自己理解mixins就是定義一個(gè)對(duì)象包含公共的方法或者數(shù)據(jù)印衔，計(jì)算屬性等,然后混入到多個(gè)組件中使用,方便管理與統(tǒng)一修改啡捶。
-
Vue.mixin
全局注冊(cè)混入對(duì)象。注意使用奸焙！ 一旦使用全局混入對(duì)象瞎暑，將會(huì)影響到所有之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí)与帆，可以為自定義對(duì)象注入處理邏輯金顿。
2.mixins
mixins.png
- 2.1 創(chuàng)建一個(gè)要混入的對(duì)象(commonMixin.js)
export const common={
methods:{
sayHello:()=>{
console.log('hello');
}
}
}
- 2.2 組件中使用剛剛創(chuàng)建的混入
import {common} from '../assets/js/commonMixin.js'
export default{
data(){
return{
}
},
mixins:[common],
mounted(){
this.sayHello();
}
}
注意：當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞交旌稀?a target="_blank">混入
3.Vue.mixin
Vue.mixin.png
Vue.mixin({data(){
return{
mix:"vue mix"
}
}})
