Contamination
Répertoire
Bases
Les Mixins offrent un moyen très flexible de distribuer des fonctions réutilisables dans les composants Vue. Un mixin peut contenir n’importe quelle option de composant. Lorsqu'un composant utilise un mixin, toutes les options du mixin seront "mixées" dans les options du composant lui-même.
Exemple :
// 定义一个混入对象
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!"Fusion d'options
Lorsque les composants et les mixins contiennent des options du même nom, ces options seront "fusionnées" de la manière appropriée.
Par exemple, les objets de données sont fusionnés de manière récursive en interne et les données des composants sont prioritaires en cas de conflits.
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" }
}
})Les fonctions Hook portant le même nom seront combinées dans un tableau, elles seront donc toutes appelées. De plus, le crochet de l'objet mixte sera appelé avant le propre crochet du composant .
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"Les options dont les valeurs sont des objets, telles que méthodes, composants et directives, seront fusionnées dans le même objet. Lorsque les noms de clé de deux objets sont en conflit, la paire clé-valeur de l'objet composant est utilisée. 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) {
// 返回合并后的值
}对于多数值为对象的选项，可以使用与 methods
var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methodsRemarque :
Vue.extend() utilise également la même stratégie pour la fusion.
Global mixin
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)
}
}🎜Veuillez utiliser les mixins globaux avec prudence car cela affecte chaque instance de Vue créée individuellement (y compris les composants tiers). Dans la plupart des cas, cela ne doit être appliqué qu'aux options personnalisées, comme dans l'exemple ci-dessus. Il est recommandé de le publier en tant que plugin🎜 pour éviter les mixins d'applications répétés. 🎜🎜🎜🎜
