客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
vue 2 中采用选项式API 如： data、methods、watch、computed以及生命周期钩子函数等等。
一、mixin 如何使用 ？通俗地讲， 示例1：
<script>
const myMixin = {
data(){
return {
num:520
}
},
mounted(){
console.log('mixin mounted');
}
}
export default {
mixins:[myMixin],
}
</script>就相当于：
<script>
export default {
data(){
return {
num:520
}
},
mounted(){
console.log('mixin mounted');
}
}
</script>这样做的好处就是可以把多个组件公共选项抽取到一个 mixin 对象内，需要的时候直接引入就可以了。 二、mixin 使用时注意点
2.1、使用 mixin 对象时，组件内部和 mixin 包含相同选项，如何处理呢？示例2：
<template>
<div>
{{qdr}} - {{name}}
</div>
</template>
<script>
const myMixin = {
data(){
return {
name:'热爱前端的小姐姐'
}
}
}
export default {
mixins:[myMixin],
data(){
return {
qdr:"前端人"
}
}
}
</script>运行后，我们发现两个变量都能使用， 如果我们把上个实例中的两个变量，修改成同名时，会怎样呢？ 2.2、使用的 mixin 对象选项 和实例中的选项拥有相同的属性该如何处理？示例3：
<template>
<div>
{{name}}
</div>
</template>
<script>
const myMixin = {
data(){
return {
name:'热爱前端的小姐姐'
}
}
}
export default {
mixins:[myMixin],
data(){
return {
name:"前端人"
}
}
}
</script>
属性值相同时，会选择就近原则，优先继承实例内的值，所以 2.3、mixin 对象也可以添加生命周期钩子函数mixin 和 实例中 的那个优先执行呢？ 示例4：
const myMixin = {
mounted(){
console.log('mixin mounted');
}
}
export default {
mixins:[myMixin],
mounted(){
console.log('mounted');
}
}运行结果： 我们发现生命周期函数会合并执行，优先执行 三、mixin 自定义属性
简单讲， 示例5：添加自定义属性
const myMixin = {
custom:'自定义属性'
}
在实例中使用：
mounted(){
console.log(this.$options.custom);
}如果在实例中也包含一个同名自定义属性时，优先级会作何处理呢？如果我们想控制优先级又该如何处理呢？ 四、合并策略
使用规则：
app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{
return appVal || mixinVal // 确定优先返回哪个属性值
}根据上述示例5，给实例中加 示例6：验证
<script>
const myMixin = {
custom:'mixin custom',
}
export default {
custom:'app custom',
mixins:[myMixin],
mounted(){
console.log(this.$options.custom); // 打印结果：app custom
}
}
</script>发现， 在 main.js 文件内引入：
app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{
return mixinVal || appVal
}再次运行之后，我们发现打印结果变成 mixin 中的属性值了： console.log(this.$options.custom); // 打印结果：mixin custom 五、全局配置 mixin如果项目中有多个组件复用某些选项时，我们可以通过全局使用 语法如下：
app.mixin([ {}, {}, {} ])到此这篇关于 vue3 mixin 混入使用方法的文章就介绍到这了,更多相关 vue3 mixin 混入内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论