VUE3+elementPlus之 子组件直接修改父组件的值（父子组件props双向绑定）

直接上代码：
子组件：

<el-tree @node-click="handleNodeClick" />

//组合式api
const props = defineProps({
   
  modelValue: {
   
    type: [Number],
    default: undefined,
  },
});
interface Tree {
   
  id: number;
  name: string;
  children?: Tree[];
}
/** 部门树节点 Click */
const emits = defineEmits(["node-click"]); // 自定义emits事件
const deptId = useVModel(props, "modelValue", emits); // 通过useVModel将子组件props与父组件modelValue双向绑定

const handleNodeClick = (data: Tree) => {
   
  deptId.value = data.id;
  emits("node-click");
};

父组件：

<dept-tree v-model="searchParam.deptId" @node-click="tableSearch" />
//定义参数、方法略

通过 useVModel 函数将子组件的 deptId 和父组件中的 modelValue 进行了双向绑定。这意味着当子组件中的 deptId 发生变化时，父组件中的 modelValue 也会相应地进行更新。
需要注意的是，Vue 推荐使用组件之间的 props 和事件来进行父子组件之间的通信，而不是直接修改父组件的值。但是，使用 v-model 可以简化双向绑定的操作，使代码更加简洁。