在 vue3 中,父组件仍然可以通过以下方式访问子组件实例(以 element-plustree 组件为例)

<template>
    <el-tree ref="tree"></el-tree>
</template>

<script>
export default {
    mounted() {
        let tree = this.$refs.tree;
        // tree.getCurrentNode();
        console.log(tree)
    }
}
</script>

但是总感觉哪里不对,毕竟不是在setup中,没用上vue3的新特性。那么可以修改为以下方式

<template>
    <el-tree ref="tree"></el-tree>
</template>

<script>
export default {
    setup() {
        let tree = ref(null);
        // tree.value.getCurrentNode();
        return {
            tree
        }
    }
}
</script>

Notice: setup里的变量名,需要与templateref的值一致。

JS如此,那么 TS 应该怎么样呢?

<template>
    <el-tree ref="tree"></el-tree>
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
import ElTree from "element-plus/lib/el-tree"
export default defineComponent({
    setup() {
        let tree: Ref<InstanceType<typeof ElTree> | null> = ref(null);
        // tree.value.getCurrentNode();
        return {
            tree
        }
    }
})
</script>

这里用上了 TS 的 InstanceType(获取构造函数的实例类型) 方法