Vue官方提供了可以批量继承的方法，使得我们在二次封装组件时便利不少，以下是对方法的详细讲解。

1. 继承属性

​ 第三方组件中的属性一般有很多，例如 el-dialog就有十六个，如果在二次封装时在组件中一个个的定义props太繁琐了。

​ 🟢因此我们使用vue的实例property： vm.$attrs 。[vue2、vue3] (Vue2 和 Vue3 都适用)

$attrs：组件实例的该属性包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部的 UI 库组件中。

<!-- 使用方法： v-bind="$attrs"  -->

<!-- 示例  -->
<template>
	<div class="myDialog">
		<el-dialog
			:visible.sync="dialogVisible"
			v-dialogDrag
			v-bind="$attrs"
		>
		</el-dialog>
	</div>
</template>

2. 继承事件

​ 第三方组件中的Events事件不需要再一个个的$emits。

​ 🟢我们使用vue的实例property：vm.$listeners。[vue2] (vue2适用，vue3中vm.$listeners移除并和$attrs合并)

$listeners：组件实例的该属性包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"转发传入内部组件，进行对事件的监听处理。

<!-- 使用方法： v-on="$listeners"  -->

<!-- 示例  -->
<template>
	<div class="myDialog">
		<el-dialog
			:visible.sync="dialogVisible"
			v-dialogDrag
			v-bind="$attrs"
            v-on="$listeners"
		>
		</el-dialog>
	</div>
</template>

3. 继承插槽

第三方组件中的Slot不需要再一个个的手动添加<slot name="prefix">。

​ 🟢我们使用vue的实例property：vm.$slots、vm.$scopedSlots。

• 普通插槽：vm.$slots。[vue2、vue3] (vue2和vue3都适用)
• 作用域插槽：vm.$scopedSlots。[vue2] (vue2适用，vue3中$scopedSlots移除并和 $slots合并)

$slots：普通插槽，使用$slots这个变量拿到非作用域的插槽，然后循环渲染对应的普通具名插槽，这样就可以使用第三方组件提供的原插槽；
$scopedSlots：作用域插槽则绕了一圈，使用了一个插槽的语法糖（具名插槽的缩写）并且结合着动态插槽名的用法；循环$scopedSlots作用插槽位置和传递对应的参数，这样就可以使用第三方组件提供的作用域插槽。

<!-- 示例  -->
<template>
	<div class="myDialog">
		<el-dialog
			:visible.sync="dialogVisible"
			v-dialogDrag
			v-bind="$attrs"
            v-on="$listeners"
		>
            <!-- 遍历子组件非作用域插槽，并对父组件暴露 -->
			<template v-for="(index, name) in $slots" v-slot:[name]>
				<slot :name="name"></slot>
			</template>

 			<!-- 遍历子组件作用域插槽，并对父组件暴露 -->
      		<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
        		<slot :name="name" v-bind="data"></slot>
      		</template>
		</el-dialog>
	</div>
</template>