首先是官网定义:混入 (mixin) 提供了一种非常灵活的形式,来散发 Vue 组件中的可复用性能。一个混入对象能够蕴含任意组件选项。当组件应用混入对象时,所有混入对象的选项将被“混合”进入该组件自身的选项。
艰深来讲,就是 mixin 中的属性,比方 data、methods 或者自定义属性,将被混入到全副或者指定的组件中,让这些组件能够调用 mixin 中所定义的属性或者事件
全局 mixin
首先,咱们间接定义全局的 mixin
// 定义全局 mixin
app.mixin({
message: 'mixin',
data() {
return {count: 100,};
},
});
混入 data
全局 mixin 默认会混入所有组件中,接下来,咱们再定义一个组件,模板中插入 message
字段,如下所示:
const app = Vue.createApp({
template: `
<div>{{message}}</div>
`,
});
此时 mixin 中的 data 属性将会混入到组件中,尽管组件的 data 中并没有蕴含 message 字段,然而在运行的页面中仍然显示出 message 的值 mixin message
。当初,咱们在组件外部的 data 中也增加 message 字段。
const app = Vue.createApp({data() {
return {message:'app message'}
}
...
});
这时候,运行页面,模板中的内容将显示组件中 data 里的值 app message
,这阐明,组件外部 data 的优先级是高于 mixin 外部 data 的优先级的。
混入事件(methods)
同样的,咱们也能够一下测试事件的优先级
const app = Vue.createApp({
...
methods: {handleClick() {console.log('app click');
}
},
// 这里点击元素,会打印出 "app click"
template: "<div @click="handleClick">{{message}}</div>"
});
// 定义全局 mixin
app.mixin({
...
methods: {handleClick() {console.log('mixin click');
}
}
});
点击 div,将会打印出 app click
,这阐明当 mixin 中和组件中都存在 handleClick 事件时,组件中同名事件优先级会比拟高。
混入生命周期函数(created、mounted 等)
上面,咱们同时在 mixin 和 app 中定义 created
函数
const app = Vue.createApp({
...
created() {console.log("app created");
}
});
// 定义全局 mixin
app.mixin({created() {
...
console.log("mixin created");
}
});
运行此页面,打印台会输入
mixin created
app created
也就是说,mixin 中的生命周期钩子函数与 app 组件中的钩子函数都会运行,mixin 优先执行
混入自定义属性
咱们还能够间接在 mixin 和 app 组件中自定义属性。自定义属性在模板中须要用 $options[prop]
的形式调用
const app = Vue.createApp({
message: "app message",
template: "<div @click="handleClick">{{$options.message}}</div>"
});
// 定义全局 mixin
app.mixin({message: "mixin message"});
运行页面,模板将会展现 app 组件中 message 中的值 app message
,可见,自定义属性也是组件比 mixin 优先级高。
批改自定义属性合并策略
如果咱们想让 mixin 的优先级高于组件的优先级,咱们能够通过以下代码进行批改
app.config.optionMergeStrategies.message = (mixinVal, appVal) => {return mixinVal || appVal;};
合并策略办法中承受两个参数,第一个参数为 mixin 自定义属性值,第二个参数为 app 组件自定义属性值,用户能够通过办法判断来返回哪个值,来定义自定义属性的优先级。
下面代码定义了如果 mixinVal 有值则返回 mixinValue,否则返回 appVal,所以模板中显示的应该的是 mixin message
。
部分组件
部分组件的定义,须要显式申明进组件内。
// 1. 申明部分组件变量
const MyMixin = {data() {return {};
},
created() {console.log('mixin created');
},
methods: {handleClick() {},},
};
// 2. 通过 mixins 属性注入到要被混合组件中
const app = Vue.createApp({mixins: [myMixin]
})
除了须要通过 mixins 属性注入,其余与全局组件无差别,所以不在独自论述。
缺点
mixin 能够将局部组件抽成可重用块,然而他也有不可避免的问题。
- mixin 很容易发生冲突,你会不清晰某个值到底是从 mixin 还是 app 来的。
- 可重用性无限,不能通过传递参数批改 mixin 的逻辑,升高了形象逻辑的灵活性。
总结
这篇文章,咱们讲了如下几点:
- mixin 的概念及定义
- 混入 data、methods、生命周期函数
- 混入自定义属性,批改自定义属性的混合策略
- 全局 mixin 及 部分 mixin 定义形式
- mixin 的缺点