需要场景
咱们可能在工作中常常会遇到这样的场景，须要基于某个UI组件库（本文以Vuetify为例，其余的也同理）封装一个可复用的组件，不仅要实现自定义性能，还心愿能沿用第三方组件自身提供的属性，事件等。
举几个具体的栗子：
- 对立给text-field增加一个clearable的动作
- 想更改text-field默认label款式，由点击悬浮变为固定地位
- 给image组件增加loading的成果
- 给table组件对立增加一些诸如挪动列，刷新，csv下载的动作
技术关键点
一、继承属性
v-bind="$attrs" 和 inheritAttrs: false
$attrs蕴含了父组件里除了props属性的 attribute 绑定，所以在子组件中应用$attrs就能够获取到父组件传递的属性。
然而默认状况下这些属性会被认作是一般的HTML attribute利用到子组件的根元素上，当初咱们像创立一个wrapper来做封装时很可能会呈现不合乎预期的状况，此时咱们就须要设置inheritAttrs: false来打消这种默认行为。
vue2.x和vue3.x中的区别
$attrs在vue2和vue3中的体现有所不同，在vue2里，$attrs不蕴含style和class，而在vue3中蕴含
二、继承事件
v-on="$listeners"
$listeners里蕴含了父组件作用域中v-on 事件监听器。咱们在子组件中能够通过v-on="$listeners"来获取父组件传入的事件
vue2.x和vue3.x中的区别
$listeners在vue3中被移除了，能够间接通过$attrs来代替
三、继承插槽
$scopedSlots 和 $slots
vuetify中提供了非常灵活的自定义插槽，所以对于插槽的继承也是十分重要滴
<template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData"> <slot :name="scopedSlotName" v-bind="slotData" /></template><template v-for="(_, slotName) in $slots" #[slotName]> <slot :name="slotName" /></template>参考文章
- https://dev.to/onurelibol/cre...
- https://dev.to/kouts/create-w...