Vue中混入mixin的用法介绍
更新时间：2022年10月17日 11:15:04 作者：爱思考的猪
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
什么是混入？
混入通过注入配置项到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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue-cli和移动端布局和动画使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,下面这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的详细步骤,需要的朋友可以参考下2023-11-11
vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详
defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏，他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉，这篇文章主要介绍了vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了解决vue前后端端口不一致的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
vue3+vite+ts使用require.context问题
这篇文章主要介绍了vue3+vite+ts使用require.context问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue中如何删除字符串中的空格符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue中computed下使用箭头函数会报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue实现表格合并功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了在vue中实现虚拟列表组件，解决长列表性能问题,本文给大家分享实现思路及实例代码，需要的朋友可以参考下2022-07-07
最新评论