混入(mixin)
官方:cn.vuejs.org/v2/guide/mi…
尤雨溪教你写mixin:www.bilibili.com/video/BV1d4…
混入 (mixin) 提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
当多个组件，或者页面使用相同的逻辑，可以考虑使用mixins把公共部分提取。
类似于于封装组件,再把代码导入到组件的意思
关于选项冲突处理
数组可以接收多个
mixin当组件选项与混入选项冲突时以组件优先,所以以下代码显示"山竹'
<body>
<div id="app">{{name}}</div>
<script>
// 定义一个混入对象
const myMixin = {
data() {
return {
name: '胖虎'
}
}
}
// 定义一个Vue
const app = new Vue({
el: '#app',
//mixins节点表示引入混入,接收一个数组,可以是多个mixin
mixins: [myMixin],
data() {
return {
name: '山竹'
}
}
})
</script>
</body>
当组件和mixin同时定义生命周期选项,两个都会触发,而且mixin会先触发.
<script>
// 定义一个混入对象
const myMixin = {
mounted() {
console.log('minxin的mounted');
}
}
// 定义一个Vue
const app = new Vue({
el: '#app',
//mixins节点表示引入混入,接收一个数组,可以是多个mixin
mixins: [myMixin],
//
mounted() {
console.log('组件的mounted');
}
})
</script>
如果组件和mixin同时定义相同方法,会使用组件方法,会覆盖mixin.
<body>
<div id="app">
<button @click='tryMixin'>按钮</button>
</div>
<script>
// 定义一个混入对象
const myMixin = {
methods: {
tryMixin() {
console.log('mixin的方法');
}
}
}
// 定义一个Vue
const app = new Vue({
el: '#app',
//mixins节点表示引入混入,接收一个数组,可以是多个mixin
mixins: [myMixin],
methods: {
tryMixin() {
console.log('组件的方法');
}
}
})
</script>
</body>
如果组件和mixin同时定义相同计算属性,会使用组件方法,会覆盖mixin. 以下代码会显示"组件的computed'
<body>
<div id="app">
{{monitor}}
</div>
<script>
// 定义一个混入对象
const myMixin = {
computed: {
monitor() {
return '组件的computed'
}
}
}
// 定义一个Vue
const app = new Vue({
el: '#app',
//mixins节点表示引入混入,接收一个数组,可以是多个mixin
mixins: [myMixin],
computed: {
monitor() {
return '组件的computed'
}
}
})
</script>
</body>
什么时候要用mixin?
当多个组件/页面有相同的选项,可以通过mixin抽离公共代码,达到复用效果,类似封装组件.
mixin的缺点
vue3.0中已经将
mixin作为备选方案,优先选择使用hook,也是复用的.因为mixin覆盖性会导致不稳定性.类似全局变量,如果mixin被修改,会造成全局污染.所以使用的时候需要小心
