Vue中如何扩展一个组件

不这是派大星

已于 2022-06-21 07:44:20 修改

阅读量2.2k

点赞数 4

分类专栏： Vue经典面试题，常见面试题，前端面试必备文章标签： vue.js 前端 javascript

于 2022-06-21 07:24:30 首次发布

本文链接：https://blog.csdn.net/m0_67749488/article/details/125326361

版权

1.什么是组件的扩展？

通常我们封装一个组件是希望这个组件的功能是越小越好，这个组件的功能大概率是单一的，这个组件只用来做一件事。现在我们想给这个组件添加一个功能，这就叫扩展一个组件。

2.扩展一个组件有那些方法？

可以按照逻辑扩展和内容扩展来列举

逻辑扩展：mixins、extends、composition api

内容扩展：slots

3.分别说出他们使用方法、场景差异和问题

mixins：当用得比较多的时候，可能会出现多个mixins变量名一样时的冲突。而且溯源麻烦，不好维护。

注：mixins使用时组件里data、methods优先级高于mixins 里的 data、methods。生命周期函数，是先执行mixins里面的，再执行组件里面的。

// 复用代码：它是一个配置对象，选项和组件里面一样
const mymixin = {
	methods: {
		dosomething(){}
	}
}
// 全局混入：将混入对象传入
Vue.mixin(mymixin)

// 局部混入：做数组项设置到mixins选项，仅作用于当前组件
const Comp = {
	mixins: [mymixin]
}

slots：当一个容器型组件，需要外部传显示内容用到，比如子组件被调用父组件可以通过slots来控制子组件的内容。

composition api：在composition api外实现一个方法，直接引入到composition api，来源明了方便维护。