将混入定义的组件对象和当前组件进行结合，用来定义公用数据和方法以及生命周期等
局部混入
一、在组件中使用
<template>
<div>
<div>{{ msgUser }}</div>
<div>{{ msgMenu }}</div>
</div>
</template>
<script>
const user = {
data() {
return {
msgUser: "mixins user",
};
},
};
const menu = {
data() {
return {
msgMenu: "mixins menu",
};
},
};
export default {
mixins: [user, menu],
};
</script>
二、封装抽离
1、新建mixin.js
// 按需引入
export const user = {
data() {
return {
msgUser: "mixins user"
};
}
};
export const menu = {
data() {
return {
msgMenu: "mixins menu"
};
}
};
2、组件中引入并使用
<template>
<div>
<div>{{ msgUser }}</div>
<div>{{ msgMenu }}</div>
</div>
</template>
<script>
import { user, menu } from "@/utils/mixin";
export default {
mixins: [user, menu],
};
</script>
全局混入
全局混入会影响每一个组件，所以使用需谨慎，在这里我就放弃了，实在不好用
一、在组件中使用
<template>
<div>
<div>{{ msgUser }}</div>
<div>{{ msgMenu }}</div>
</div>
</template>
<script>
export default {};
</script>
在main.js中注册
Vue.mixin({
data() {
return {
msgUser: "mixins user",
msgMenu: "mixins menu"
};
}
});
二、封装抽离
1、新建mixin.js
const mixins = {
data() {
return {
msgUser: "mixins user",
msgMenu: "mixins menu"
};
}
};
const mixinsT = {
data() {
return {
msgUser: "mixins user T",
msgMenu: "mixins menu T"
};
}
};
export default {
mixins,
mixinsT
};
2、新建globalmixin.js，在install函数中，遍历重构混入对象
// 引入混入
import mixins from "./globalMixins.js";
const globals = {
install: function(Vue, option) {
Object.keys(mixins).forEach(key => {
// Object.keys(mixins) //返回数组，数组里面的每一项是对象的属性名称
Vue.mixin(mixins[key]);
});
}
};
export default globals;
3、在main.js中引入，并use
import globalmixin from "@/utils/globalmixin.js";
Vue.use(globalmixin);
混入对象和组件同名情况下的处理机制
对象类型的方法 – 以组件为主
函数类型的方法 – 混入函数先执行
1. 默认合并：
在未定义“混入”规则的情况下，Vue本身会采取默认的规则将 混入对象 对应的“合并”至目标组件中
2. data同名：
data对象的内部会进行递归合并，当发生冲突时，组件为主
3. 对象类型的选项（methods、components、directives、watch、computed 等）同名：
同名的将被合并为同一个对象。两个对象键名冲突时，组件为主
4. 生命周期钩子函数同名：
同名的钩子函数会合并成一个数组，混入对象的钩子函数先执行
