组件继承

前言

在vue3中extends是在不修改原有组件的情况下，对组件进行扩展，这跟vue2中不一样，在vue2中是可以做到完全继承组件的所有内容，包括template，但是在vue3中是不可以的，vue3中extends只能继承组件的属性和事件，template是不会继承的，所以在vue3中extends的使用场景是有限的，一般只用于对组件的属性和事件进行扩展，而不是对组件的内容进行扩展，而且vue2中是可以做到重写覆盖原组件的一些函数，vue3中是不可以的，只能扩展。

属性和事件继承

vue3中是默认继承的，不需要特殊处理，前提根元素就是要继承组件

继承插槽

<template v-for="(_, name) in $slots" #[name]="slotData">
    <slot :name="name" v-bind="slotData || {}"></slot>
</template>

$refs

子组件：

<template>
  <el-table ref="eltable" v-bind="{ ...$props, ...$attrs }">
    <!--传递插槽-->
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData || {}"></slot>
    </template>
  </el-table>
</template>

<script>
import { ElTable } from 'element-plus'
export default defineComponent({
  name: 'TpTable',
  extends: ElTable,
  expose: ['testFn'],
  methods: {
    testFn() {
      console.log('testFn', this.$refs.eltable)
    }
  }
})
</script>

<style lang="scss" scoped></style>

父组件：

<template>
  <TpTable ref="myTable">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </TpTable>
</template>

<script setup>
const { proxy } = getCurrentInstance()

onMounted(() => {
  console.log(proxy.$refs.myTable.testFn)
  proxy.$refs.myTable.testFn()
})
</script>