vue 中 ui 组件二次封装后 ref 怎么穿透到子组件里

情景：element-ui 二次封装了 el-table 组件，使用封装组件时，想要调用 el-table 组件内置的一些方法。只在封装组件上定义 ref 是拿不到 el-table 内置方法的。解决方法如下。

1. vue2

封装组件

<template>

  <el-table ref="innerComponentRef" v-bind="$attrs"></el-table>

</template>

<script>

  export default {

    data() {

      return {};

    },

    mounted() {

      const entries = Object.entries(this.$refs.innerComponentRef);

      for (const [key, value] of entries) {

        this[key] = value;

      }

    },

  };

</script>

使用组件

<template>

  <myTable ref="myTabletRef" />

</template>

<script>

  import myTable from "./myTable.vue";



  export default {

    components: { myTable },

    data() {

      return {

        val: 0,

      };

    },

    mounted() {

      console.log(this.$refs.myTabletRef);

      // 这里就可以获取到 el-table 组件提供的所有方法

    },

  };

</script>

2. vue3

封装组件

<template>

  <el-table ref="innerComponentRef" v-bind="$attrs"></el-table>

</template>

<script setup>

  import { ref } from "vue";

  const innerComponentRef = ref();

</script>

使用组件

<template>

  <mytable ref="mytableRef" />

</template>

<script setup>

  import { onMounted, ref } from "vue";

  import mytable from "@com/mytable/index.vue";



  const mytableRef = ref();



  onMounted(() => {

    for (const key in mytableRef.value.innerComponentRef) {

      this[key] = mytableRef.value.innerComponentRef[key];

    }

  });

</script>