我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念。每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子。所以你会发现它都是围绕组件展开的。
我们就来说说如何创建一个灵活的高复用的组件。之前分享过一篇「slot」内容分发的文章,它可以让我们组件的内容更加的灵活。有兴趣的可以看下。
今天主要分享的是组件中另一种分发,功能的分发「mixins」,也叫混入。在开始之前呢,我们先看个案例,先从案例中看出个大概,然后带着问题去学习知识点会更加的高效,这也是我个人比较常用的学习方式。
在 Element(一款优秀的组件库)中有这么两个组件MessageBox 与 Dialog。
官方说法:
从场景上说,MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。
所以你会发现,这两个组件非常的相似,他们共享一些相同的基本功能,如:打开/关闭之间的状态切换。但用法上又各有不同。请看下面的例子
// Message Box
<template>
<el-button type="text" @click="open">打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
}
}
}
</script>
// Dialog
<el-button type="text" @click="dialogVisible = true">打开 Dialog</el-button>
<el-dialog
:visible.sync="dialogVisible">
<span>这是一段信息</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
}
};
</script>
相似的组件,相同基本功能,这时你不得不做出选择,是将它们分成两个不同的组件?还是只保留一个?
显然这两种做法都不完美,如果分成两个组件,后期有功能的变动话,就会去修改多次,带来维护成本。如果保留一个,但是用法上又各有不同,这可怎么办呢?
有同学也会有疑问,不就两个组件吗?能带来多少维护成本?其实不仅如此,类似于这种状态切换的功能还有提示框,弹出框等等。
所以 Vue 给我们提供了一种方案叫功能的分发「mixins」。
什么是 Mixins
官方说法:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
简单来说就是可以让不同的组件「共用」某个功能。
Mixins 对象可以包含 Vue 实例中的所有选项,当组件使用 Mixins 对象时,Mixins 对象中的所有选项将和组件中的选项进行合并。
既然如此那我们就来尝试用 Mixins 对象 去修改上面两个组件。让它们可以共用一个方法。以下组件都是自己书写的简单实现,只实现状态切换的基本功能。
//mixins.js
export const showMixin = {
data: function () {
return {
isShowing: true
};
},
methods: {
toggle() {
this.isShowing = !this.isShowing;
}
}
}
//MessageBox
<template>
<div class="panel-box">
//省略
</div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {
name: "MessageBox",
mixins: [showMixin]
};
//DialogBox
<template>
<div class="panel-box">
//省略
</div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {
name: "DialogBox",
mixins: [showMixin]
};
</script>
可以看到,我们把两个组件的相同功能给剥离出来,采用 mixins 对象的方式然后在组件中引入即可,这样以来组件就会有更好的灵活性。
有聪明的小伙伴应该就会有疑问了,如果 mixins 对象中的选项和组件实例中的选项相同时会怎么办?这也是我们下面要说到的问题,Vue 中给出了我们几个决策机制,一起来看看。
选项的合并
- data 对象的合并
当组件与混入对象的 data 对象发生冲突时,以组件中的优先,如何没有冲突将会进行递归合并。
const mixin = {
data: function() {
return {
hero: "蛮三刀",
text: "来自mixins中的「上单一霸」"
};
}
};
export default {
name: "DialogBox",
mixins: [mixin],
data() {
return {
text: "来自组件中的「上单一霸」"
};
},
mounted() {
console.log(this.$data);
// {hero: "蛮三刀",text: "来自组件中的「上单一霸」"}
}
};
- 钩子函数的合并
钩子函数将会被全部调用,因为同名钩子函数将会被合并成一个数组,但 mixins 中的钩子会优先于组件中的钩子执行。
const mixin = {
created() {
console.log("mixins中的上单一霸");
},
mounted() {
console.log("mixins中的中单一霸");
}
};
export default {
name: "DialogBox",
mixins: [mixin],
created() {
console.log("组件中的上单一霸");
},
mounted() {
console.log("组件中的中单一霸");
}
};
//mixins中的上单一霸
//组件中的上单一霸
//mixins中的中单一霸
//组件中的中单一霸
3.值为对象类型的合并
像methods、watch等值为对象类型的会合并成一个对象,如有冲突将采用组件中的。
const mixin = {
methods: {
say() {
console.log("mixins组件上单一霸");
},
do() {
console.log("mixins偷塔");
}
}
};
export default {
name: "DialogBox",
mixins: [mixin],
methods: {
say() {
console.log("组件上单一霸");
}
},
mounted() {
this.say(); //组件上单一霸
this.do(); //mixins偷塔
}
};
通过上面一些案例的解释,你应该熟悉了如何利用 混入对象去创建一个高复用组件了,不妨去尝试一下。
最后,希望大家能够有所收获。如果你觉得本文不错欢迎点赞转发。
关注微信公众号:六小登登,学习更多干货文章,领取全套学习资源。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。