Vue3 TreeView组件中动态添加子对象的相关技术问题

问题1：TreeView组件怎么访问App.vue里的tree变量？修改后能同步更新TreeView吗？ #

• 别直接去父组件里拿变量，不符合Vue单向数据流规则。靠谱的做法是通过props把tree传给TreeView组件。
• 只要你在App.vue里修改tree时遵循Vue响应式规则（比如用push()/splice()给数组添加元素，给对象新增属性用this.$set()），TreeView会自动同步更新——因为props是响应式的。
• 注意：不要在TreeView里直接修改props传递的tree，会破坏数据流，应该通过事件通知父组件修改。

问题2：要不要在App.vue里写方法接收新子对象并添加到tree里？如果可以，TreeView怎么调用这个方法？ #

• 这是Vue组件通信的标准操作，完全可行：
  1. 先在App.vue里定义添加子节点的方法：

     methods: {
       addChildToNode(targetNode, newChild) {
         // 先确保目标节点有children数组，没有就初始化
         if (!targetNode.children) {
           this.$set(targetNode, 'children', []);
         }
         targetNode.children.push(newChild);
       }
     }
     

  2. 在App.vue引用TreeView时，通过自定义事件把方法传递过去：

     <TreeView :tree="tree" @add-child="addChildToNode" />
     

  3. 在TreeView组件中，点击节点时触发自定义事件，传递目标节点和新子对象：

     // TreeView里处理节点点击的方法
     handleNodeClick(node) {
       const newChild = { label: '新节点', perm: 'default', children: [] };
       this.$emit('add-child', node, newChild);
     }
     

问题3：有没有别的方式获取点击的子节点？非数组类型的tree怎么访问目标对象？ #

• 获取点击节点的简单方式：递归渲染每个节点时，直接把当前节点对象绑定到点击事件上。比如TreeView的节点模板可以这么写：

  <div @click="handleNodeClick(currentNode)">
    {{ currentNode.label }}
    <!-- 递归渲染子节点，同时把add-child事件往上透传 -->
    <TreeView 
      v-if="currentNode.children && currentNode.children.length" 
      :tree="currentNode.children" 
      @add-child="$emit('add-child', ...arguments)" 
    />
  </div>
  

• 如果根tree是单个对象（不是数组），直接把这个根对象作为props传给TreeView即可，组件内部按单个节点逻辑渲染。不管根节点是单个对象还是数组，递归渲染时每个层级都能拿到当前节点对象，点击时直接传递这个对象就能访问到它。

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