Vue3中如何扩展Composition API实现的Element Plus ElTree组件并访问其Props？

方案一：通过模板引用获取组件实例访问内部属性 #

自定义组件包裹ElTree，用ref拿到实例后直接访问内部属性。Element Plus的ElTree内部属性大多带_前缀（比如_root、_dragState），这些属于私有实现，版本更新可能变动，使用时要留意兼容性。

示例代码：

<template>
  <ElTree ref="treeRef" v-bind="$attrs" v-on="$listeners">
    <!-- 自定义插槽内容 -->
  </ElTree>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElTree } from 'element-plus'

const treeRef = ref(null)

onMounted(() => {
  // 访问内部root对象
  console.log(treeRef.value._root)
  // 访问拖拽状态
  console.log(treeRef.value._dragState)
})
</script>

方案二：基于源码二次封装 #

直接拿Element Plus的ElTree源码来改，这种方式能完全掌控所有内部状态和逻辑，但需要同步跟进官方版本更新，避免出现兼容问题。

• 从Element Plus仓库复制src/components/tree下的所有源码文件
• 在项目里创建自定义Tree组件，基于复制的源码添加你的扩展逻辑
• 注册后直接用这个自定义组件

方案三：优先使用官方公开API替代内部属性 #

如果只是要实现特定功能，尽量用官方提供的公开API、插槽和事件，别依赖私有属性。比如拖拽功能，用@node-drag-start、@node-drag-enter这些公开事件就能拿到拖拽状态；节点数据可以通过getCheckedNodes、getCurrentNode等方法获取，稳定性比直接访问内部属性高得多。

总结 #

当然可以继续扩展ElTree，不用只能用官方组件。优先选方案三保证稳定性，要是必须访问内部属性，再用方案一或二，但要注意私有属性可能随版本变化，升级Element Plus时记得测试。

内容的提问来源于stack exchange，提问作者SandyKrish