混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
一. 组件选项 mixins
- mixins选项中可以传入任意多的选项（mixins是一个数组）
<body>
<div id='app'></div>
<script>
let com = {
created(){
console.log('hello');
},
data(){
return {
msg:'data from mixin'
}
},
methods:{
say(){
console.log('methods from mixin');
}
}
}
new Vue({
el:'#app',
mixins:[com],
created(){
this.say();
console.log(this.msg);
}
})
</script>
</body>
混入合并（当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。）
- 数据对象在内部会进行递归合并（深度为1），并在发生冲突时以组件数据优先。
- 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
二. 全局混入 Vue.mixin()
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
<body>
<div id='app1'></div>
<div id="app2"></div>
<script>
Vue.mixin({
created(){
let myOption = this.$options.myOption;
myOption && console.log(myOption);
}
})
new Vue({
el:'#app1',
myOption:[1,2,3,4]
})
new Vue({
el:'#app2',
myOption:'hello world'
})
</script>
</body>
- 自定义了选项
myOption，并且使用全局混入添加处理器。结果每一个Vue实例都受到影响。
全局混入
网友评论