什么是混入?
混入通过注入配置项到vue实例用来提升复用性
const myMixin = { created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from mixin'); }, }, }; var vm = new Vue({ el: '#app', mixins: [myMixin], });
选项合并发生在下面两种情况
const myMixin = { created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from mixin'); }, }, }; var vm = new Vue({ el: '#app', mixins: [myMixin], created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from vue instance'); }, }, });
上述两种的选项合并规则是相同的:
除了使用上述默认的合并规则,还可以通过Vue.config.optionMergeStrategies自定义合并规则。
Vue.config.optionMergeStrategies.myMixin=(toVal, fromVal){ //返回合并的值 };
通常对于值为对象的属性我们可以借用已有的合并规则
//借用methods的规则 Vue.config.optionMergeStrategies.myMixin=Vue.config.optionMergeStrategies.methods;
混入也可以全局注册,使用时候要格外小心,它会影响到每一个组件/实例
Vue.mixin({ created: function () { console.log('mixin created'); }, }); var vm1 = new Vue(...); var vm2 = new Vue(...);