您现在的位置是：网站首页> 编程资料编程资料

Vue中混入mixin的用法介绍_vue.js_

2023-05-24 403人已围观

简介 Vue中混入mixin的用法介绍_vue.js_

什么是混入？

混入通过注入配置项到vue实例用来提升复用性

基础使用

 const myMixin = { created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from mixin'); }, }, }; var vm = new Vue({ el: '#app', mixins: [myMixin], });

选项合并

选项合并发生在下面两种情况

  • mixins接收的是一个数组,mixin中的属性冲突时会发生合并
  • mixin属性和组件原有属性冲突时
 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'); }, }, });

上述两种的选项合并规则是相同的:

  • 周期钩子冲突的时候,会合并成数组都保留,执行顺序是先执行minxi的钩子,再执行组件上的钩子
  • methods、computed这类值为对象的选项在冲突的时候以组件属性为准

自定义合并规则

除了使用上述默认的合并规则,还可以通过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(...);

总结

  • mixin混入通过注入配置项到vue实例提升复用性
  • 属性冲突时以组件内的属性为准,声明周期的钩子会保留多个

到此这篇关于Vue中混入mixin的用法介绍的文章就介绍到这了,更多相关Vue mixin内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：JavaScript reduce方法使用方法介绍_javascript技巧_

下一篇：vue 项目页面卡死原因排查分析_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网