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模板网！
