Pencemaran
Direktori
Asas
Mixin menyediakan cara yang sangat fleksibel untuk mengagihkan fungsi boleh guna semula dalam komponen Vue. Mixin boleh mengandungi sebarang pilihan komponen. Apabila komponen menggunakan mixin, semua pilihan mixin akan "bercampur" ke dalam pilihan komponen itu sendiri. Contoh:
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"Penggabungan Pilihan
Apabila komponen dan campuran mengandungi pilihan dengan nama yang sama, pilihan ini akan "digabungkan" dengan cara yang sesuai.
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})Fungsi cangkuk dengan nama yang sama akan digabungkan menjadi tatasusunan, jadi semuanya akan dipanggil. Selain itu, cangkuk objek bercampur akan dipanggil sebelum cangkuk komponen sendiri . var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"注意：Vue.extend() 也使用同样的策略进行合并。
全局混入
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
自定义选项合并策略
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}对于多数值为对象的选项，可以使用与 methodsPilihan yang nilainya adalah objek, seperti kaedah, komponen dan arahan, akan digabungkan ke dalam objek yang sama. Apabila nama kunci dua objek bercanggah, pasangan nilai kunci objek komponen diambil.
var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods
Nota: Vue.extend() juga menggunakan strategi yang sama untuk penggabungan.
Global mixin
🎜🎜🎜Mixin juga boleh didaftarkan secara global. Gunakan dengan sangat berhati-hati! Sebaik sahaja campuran global digunakan, ia akan mempengaruhi 🎜setiap 🎜Vue contoh yang dibuat selepas itu. Apabila digunakan dengan sewajarnya, ini boleh digunakan untuk menyuntik logik pemprosesan untuk pilihan tersuai. 🎜🎜const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}🎜Sila gunakan campuran global dengan berhati-hati kerana ia mempengaruhi setiap contoh Vue yang dibuat secara individu (termasuk komponen pihak ketiga). Dalam kebanyakan kes, ini hanya boleh digunakan pada pilihan tersuai, seperti contoh di atas. Adalah disyorkan untuk menerbitkannya sebagai plugin🎜 untuk mengelakkan campuran aplikasi berulang. 🎜🎜🎜🎜
