1、概念
mixin
混入提供了一种非常灵活的方式来分发vue
组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混合进入该组件本身的选项。
2、功能
混入可以将多个组件中的公共配置提取成一个混入对象,这样就可以实现代码复用。
3、语法
混入和过滤器等配置类似,有全局混入和局部混入两种使用方式。
4、代码实现
第一步
在
src
文件夹下新建名为mixin
文件夹,在mixin
文件夹下新建名为index
的点.js
文件。
第二步
在
index
文件中写入以下代码,不仅仅是以下代码,组件中的生命周期和方法都可以在此文件中写入。
export default {
data() {
return {
mixinData: {
name: '混入的data数据',
value: 86
}
};
},
created() {
console.log('混入的created生命周期');
},
methods: {
mixinFn() {
console.log('混入方法');
}
}
};
4.1、全局混入
实现混入
全局注册一个混入,影响注册之后所有创建的每个
vue
实例。使用混入可以向组件注入自定义的行为,但是不推荐在应用代码中使用。在main.js
中全局混入,其中参数mixin
是一个对象,里面包含混入的所有组件配置。有时候会打印多次混入内容,这是因为使用了多次嵌套组件,每一个组件都会加载一次created
方法。因此mixin
在实际生产环境中不建议使用全局混入。
import mixin from './mixin/index.js';
Vue.mixin(mixin);
使用全局混入
<template>
<div>
<button @click="mixinFn">点我打印信息</button>
<div>{{ mixinData.name }}</div>
<div>{{ mixinData.value }}</div>
</div>
</template>
export default {
name: 'inexView',
data() {
return { }
}
}
4.2、局部混入
将定义好的混入对象引入要用的组件。它和全局混入的方式不同,不需要在
main.js
中引入。同全局混入一样,其中参数mixin
是一个对象,里面包含混入的所有组件配置。在组件中引入使用即可。
<template>
<div>
<button @click="mixinFn">点我打印信息</button>
<div>{{ mixinData.name }}</div>
<div>{{ mixinData.value }}</div>
</div>
</template>
import mixin from '@/mixin/index.js';
export default {
name: 'inexView',
mixins: [mixin],
data() {
return { }
}
}
5、混入规则
规则一
数据对象内部,如果是基本类型的变量,那么组件中变量会覆盖混入中定义的变量。如果是引用数据类型,在内部会进行递归合并,并在发生冲突时以组件数据优先。
规则二
生命周期钩子冲突时,会执行两遍,先执行混入中的生命周,然后执行组件中的生命周期。混入配置同上。
规则三文章来源:https://www.toymoban.com/news/detail-424439.html
值为对象的其他配置,比如
methods
等,会合并成一个对象,然后取组件中的键值执行。混入配置同上。文章来源地址https://www.toymoban.com/news/detail-424439.html
到了这里,关于vue2混入实现、mixin、methods的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!