vue3 二次封装el-tree，如何在父组件调用el-tree的内置方法？

Question

父组件：

<template>
  <div>
    <CustomTree ref="customTree" />
    <button @click="handleClick">调用 getNode 方法</button>
  </div>
</template>

子组件CustomTree ：

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

如何在父组件调用el-tree中的getNode方法？

Answer 1

可以在子组件中使用defineExpose把treeRef暴露出去

Answer 2

正常父组件调子组件通过this.$refs.名称，多嵌套一层，就再读一下ref

Answer 3

在setup写法里，父组件调用子组件的属性和方法时，需在子组件里通过defineExpose将需要使用的属性和方法暴露出去。

    // 子组件
    defineExpose({
        treeRef: treeRef
    })

    // 父组件
    function handleClick(){
        customTree.value.treeRef.getNode()
    }