1.基本使用
通过混入我们可以减少代码冗余,重用某些需要复用的组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<n1></n1>
<n2></n2>
</div>
<script>
var myMixn = {
methods:{
sayHello:function () {
alert(this.msg)
}
},
template:`
<div>
<input type="button" @click="sayHello" value="btn">
</div>
`
}
Vue.component('n1',{
mixins:[myMixn],
data(){
return{
msg:'n1的hello'
}
}
})
Vue.component('n2',{
mixins:[myMixn],
data(){
return{
msg:'n2的hello'
}
},
})
var vue = new Vue({
el:'#app',
data:{
msg:'Hello World'
},
provide:function () {
return{
msg:this.msg
}
}
});
</script>
</body>
</html>
2.选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
- 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
3.全局混入
混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。
4.自定义选项合并策略
自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
对于多数值为对象的选项,可以使用与 methods 相同的合并策略:
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods