vue3+ts 如何使用将子组件通过ref使用
在 vue3 中,父组件仍然可以通过以下方式访问子组件实例(以 element-plus
的 tree
组件为例)
<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
里的变量名,需要与template
中ref
的值一致。
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
(获取构造函数的实例类型) 方法
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。