1.mixin语法
mixin就是在组件中混入数据的语法
- mixin 混入 组件里没有数据的时候会使用混入的数据
- 组件data优先级 高于 mixin data优先级
- 如果是生命周期函数 先执行mixin里面的 再执行组件里面的
- methods里面的情况和data里面的情况一样
2.局部mixin
const app = Vue.createApp({
data() {
return {
number: 1,
count: 2,
};
},
created() {
console.log("created");
},
//局部的mixin需要用这种语法引入
mixins: [myMixin],
methods: {
handleClick() {
console.log("handleClick");
},
},
template: `
<div>
<div>{{number}}</div>
<child/>
<button @click="handleClick">增加</button>
</div>
`,
});
// 局部的mixin
const myMixin = {
data() {
return { number: 2 };
},
created() {
console.log("mixin created");
},
methods: {
handleClick() {
console.log("mixin handleClick");
},
},
};
3.全局mixin
全局mixin所有的组件都能使用,而且不用注册
const app = Vue.createApp({
data() {
return {
number: 1,
count: 2,
};
},
created() {
console.log("created");
},
// mixins: [myMixin],
methods: {
handleClick() {
console.log("handleClick");
},
},
template: `
<div>
// 可以在这里使用mixin里面的数据 因为是全局的所以不用注册
<div>{{number}}</div>
<child/>
<button @click="handleClick">增加</button>
</div>
`,
});
//全局的mixin
app.mixin({
data() {
return { number: 2 };
},
created() {
console.log("mixin created");
},
methods: {
handleClick() {
console.log("mixin handleClick");
},
},
});
4.在mixin里面使用自定义属性
自定义属性就是和methods,data,生命周期函数这些在同一层级的数据变量
自定义属性 组件中的属性的优先级高于 mixin自定义属性的优先级
const myMixin = {
number: 23,
};
const app = Vue.createApp({
number: 11,
mixins: [myMixin],
template: `
<div>
<div>{{this.$options.number}}</div>
<button @click="handleClick">增加</button>
</div>
`,
});
5.自己设置优先级
//设置mixin的优先级高于组件的优先级
app.config.optionMergeStrategies.number = (mixinVal, appVal) => {
return mixinVal || appVal;
};