vue3+ts 如何使用将子组件通过ref使用 2021-05-11 前端 暂无评论 1994 次阅读 在 vue3 中，父组件仍然可以通过以下方式访问子组件实例（以 `element-plus` 的 `tree` 组件为例） ```html <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的新特性。那么可以修改为以下方式 ```html <template> <el-tree ref="tree"></el-tree> </template> <script> export default { setup() { let tree = ref(null); // tree.value.getCurrentNode(); return { tree } } } </script> ``` > Notice: **`setup`里的变量名，需要与`template`中`ref`的值一致。** JS如此，那么 TS 应该怎么样呢？ ```html <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`（获取构造函数的实例类型） 方法 标签: typescript 本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。