vue3 element plus 设置一个公共树控件以及父子之间的传值

//tree的代码
<!-- 公共树组件  子组件 -->
<template>
    <div style="font-size: 14px; font-weight: 600; height: 50px; border-bottom: 1px solid #eee;line-height: 50px; padding-left: 10px;">{{ props.name }}</div>
    <div style="height: calc(100% - 51px); overflow: auto;" >
      <el-tree  node-key="id" :current-node-key="props.nodekey" accordion="true" highlight-current="true" default-expand-all="true" :data="props.Tree" :props="defaultProps" @node-click="handleNodeClick" >
          <template #default="scope">
          <div class="custom-node" >
              <el-icon v-if="scope.node.id == ''" style="display: inline-block; padding-top: 2px; color: #028CFF;"><Management /></el-icon>
              <el-icon v-if="scope.node.id != 1" style="display: inline-block; padding-top: 2px; color: #028CFF;"><WalletFilled /></el-icon>&ensp;
            <span>{{scope.node.label}}</span>
          </div>
        </template>
      </el-tree>
    </div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
 const emit =  defineEmits(['childfun'])

 const props = defineProps({
    name: String,
    Tree: null,
    nodekey:Number,
 })

const handleNodeClick = (data: Tree) => {
  console.log(data.id)
   emit("childfun",data.id,data);
}


const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>
<style>
.el-tree-node__content {
    display: flex;
    align-items: center;
    height: 46px;
    cursor: pointer;
    border-bottom: 1px dashed #eee ;
}
</style>

//**父组件

<Tree :name="'部门列表'" :Tree="Treedata" :nodekey="nodekey" @childfun="Treefun" />


import Tree from './Tree.vue'


const Treedata: Tree[] = ref([
  {
    id: '',
    label: '千程水利',
    children: [{ id: 2, label: '' }]
  }
])
//树的点击传从子页面到父页面的数据
const Treefun = (id) => {
  if (!id) {
    return
  }
  deptId = id
  getdata()
}