溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”。
比如，數據對象在內部會進行遞歸合并，并在發生沖突時以組件數據優先。
var Mymixin = {
data: function(){
return {
message: 'hello',
foo: 'abc'
}
}
}
export default {
mixins:[Mymixin],
data(){
return{
message:'good',
bar:'kiss'
}
},
created(){
console.log(this.$data) //bar: "kiss",foo: "abc",message: "good"
},
同名鉤子函數將合并為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。
<script>
var Mymixin = {
created: function(){
console.log('混入對象的鉤子被調用')
}
}
export default {
mixins:[Mymixin],
data(){
return{
message:'good',
bar:'kiss'
}
},
created(){
console.log('組件鉤子被調用')
// 混入對象的鉤子被調用
// 組件鉤子被調用
}
}
</script>
值為對象的選項，
例如 methods、components 和 directives，將被合并為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。
<script>
var Mymixin = {
methods: {
foo: function(){
console.log('foo')
},
conflicting: function(){
console.log('from mixin')
}
}
}
export default {
mixins:[Mymixin],
created(){
this.foo()
this.conflicting()
this.bar()
// foo
// from self
// bar
},
methods:{
bar:function(){
console.log('bar')
},
conflicting: function(){
console.log('from self')
}
}
}
</script>
全局混入
混入也可以進行全局注冊。使用時格外小心！一旦使用全局混入，它將影響每一個之后創建的 Vue 實例。使用恰當時，這可以用來為自定義選項注入處理邏輯。
// 為自定義的選項 'myOption' 注入一個處理器。可在main.js中寫入
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
在任意組件里面都可以使用
new Vue({
myOption: 'hello!'
})
// => "hello!"
export default {
myOption: 'hello!',
}
請謹慎使用全局混入，因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用于自定義選項，就像上面示例一樣。推薦將其作為插件發布，以避免重復應用混入。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
