Vue2实战指南：如何二次封装组件
# 如何继承第三方组件的属性
第三方组件中，存在很多Attributes属性，是不需要一个个写的，因此需要用到 $attrs
```javascript
<template>
<v-tooltip
ref="tooltipRef"
v-model="show"
v-bind="$attrs"
z-index="500"
>
</template>
```
# 如何继承第三方组件的Event 事件
```javascript
<template>
<v-tooltip
v-model="show"
v-bind="$attrs"
v-on="$listeners"
z-index="500"
>
</template>
```
# 如何使用第三方组件的Slots
```javascript
<template>
<v-tooltip
v-model="show"
v-bind="$attrs"
z-index="500"
>
<!-- 遍历子组件非作用域插槽，并对父组件暴露 -->
<template v-for="(index, name) in $slots" v-slot:[name]>
<slot :name="name" />
</template>
<!-- 遍历子组件作用域插槽，并对父组件暴露 -->
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
<span v-if="text.length > 0">{{ text }}</span>
</v-tooltip>
</template>
```
# 如何使用第三方组件的Methods
```javascript
mounted() {
this.extendMethod()
},
methods: {
// 继承v-tooltip的Method
extendMethod() {
const refMethod = Object.entries(this.$refs['tooltipRef'])
for (const [key, value] of refMethod) {
if (!(key.includes('$') || key.includes('_'))) {
this[key] = value
}
}
},
}
```