情景：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>
