- 混入的数据无法在子组件中直接使用,如下:获取不到child中的count
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>28</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// mixin混入
const myMixin = {
data() {
return {
number: 2,
count: 222
}
},
created() {
console.log('mixin created')
},
methods: {
handleClick() {
console.log('mixin handleClick')
}
}
}
const app = Vue.createApp({
data() {
return {
number: 1,
}
},
created() {
console.log('created')
},
mixins: [myMixin],
methods: {
handleClick() {
console.log('handleClick')
}
},
template: `
<div>
<div>{{number}}</div>
<child />
<button @click="handleClick">增加</button>
</div>
`
});
app.component('child', {
template: "<div>{{count}}</div>"
})
const vm = app.mount('#root')
</script>
</body>
</html>
2. 如果子组件中想用mixin中的数据,要引入mixins,如下:
app.component('child', {
mixins: [myMixin],
template: "<div>{{count}}</div>"
})
- 定义全局mixin: 默认会注入到每个组件中,就不用在每个组件中引入(一般不推荐使用全局mixin,维护性不高)
app.mixin({
data() {
return {
number: 2,
count: 222
}
},
created() {
console.log('mixin created')
},
methods: {
handleClick() {
console.log('mixin handleClick')
}
}
}
)
- 对于自定义属性,组件中的自定义属性优先级高于mixin属性的优先级:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>28</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// mixin混入
const myMixin = {
number: 1
}
const app = Vue.createApp({
mixins: [myMixin],
number: 2,
template: `
<div>
<div>{{this.$option.number}}</div>
</div>
`
});
const vm = app.mount('#root')
</script>
</body>
</html>
如果想修改自定义属性的优先级:
app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
return mixinVal || appValue;
}
如上表示,如果自定义属性有混入值,则优先返回混入的,没有则返回app中定义的
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>28</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// 自定义的属性,组件中的属性优先级高于Mixin属性的优先级
const myMixin = {
number: 1
}
const app = Vue.createApp({
mixins: [myMixin],
number: 2,
template: `
<div>
<div>{{this.$options.number}}</div>
</div>
`
});
app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
return mixinVal || appValue;
}
const vm = app.mount('#root')
</script>
</body>
</html>