q：vue中如何扩展一个组件？
逻辑扩展有：mixins、extends、composition api；
内容扩展有slots；
- 混入mixins是分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
- extends只能继承与一个组件。跟混入的不同是它只能扩展单个对象。另外如果和混入发生冲突，该选项优先级较高，优先起作用。
- 插槽主要用于vue组件中的内容分发，也可以用于组件扩展。如果要精确分发到不同位置可以使用具名插槽，如果要使用子组件中的数据可以使用作用域插槽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Extends 扩展选项</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue Extends 扩展选项</h1>
<hr>
<div id="app">
<p>
{
{num}}
</p>
<p><button @click="add">add</button></p>
</div>
</body>
</html>
<script>
// mixxin
const mymixin1 = {
created() {
console.log('我是mixin1中的created')
},
methods:{
//如果方法名一样 他只触发构造器里的方法 扩展不触发 混入选项也一样
add:function(){
this.num++
console.log('我是mixin1中的方法add')
}
}
}
const mymixin2 = {
created() {
console.log('我是mixin2中的created')
}
}
// extends
var extendObj={
updated:function () {
console.log('我是扩展的Update')
},
mounted() {
console.log('我是扩展的mounted')
},
methods:{
//如果方法名一样 他只触发构造器里的方法 扩展不触发 混入选项也一样
add:function(){
this.num++
console.log('我是扩展出来的方法add')
}
}
};
var app = new Vue({
el:'#app',
data:{
num:1
},
created() {
console.log('我是构造器中的created')
},
mounted() {
console.log('我是构造器mounted')
},
updated:function(){
console.log('我是构造器触发的updated')
},
methods:{
add:function(){
this.num++
console.log('我是原生的方法add')
}
},
//扩展不能为数组 混入是为数组,所以扩展只能一个
extends:extendObj,
mixins: [mymixin1, mymixin2]
})
</script>
混入的数据和方法不能明确判断来源且可能和当前组件内变量产生命名冲突，vue3中引入的composition api，可以很好解决这些问题，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用，增强代码的可读性和维护性。例如：
// 复用逻辑1
function useXX() {}
// 复用逻辑2
function useYY() {}
// 逻辑组合
const Comp = {
setup() {
const {xx} = useXX()
const {yy} = useYY()
return {xx, yy}
}
}
声明
- 本文属于读书笔记一类，是作者在 《开课吧全栈架构师第16期》 vue复习章课程学习途中，以视频中内容为蓝本，辅以个人微末的道行“填写”完成，推荐购买原课程观看，定有收获。
- 欢迎大佬斧正。
- 日更