vue 实现双向树形结构

Vue 实现双向树形结构主要有两个方面需要考虑：

1. 数据结构：需要使用递归的方式将数据组织成树形结构，每个节点需要包含其子节点列表，以及其在树中的位置信息（父节点，深度等）。

2. 视图结构：需要使用递归组件的方式将树形结构渲染成视图，每个组件需要根据节点信息展示对应的内容，并包含相应的交互逻辑。

下面是一个简单的示例代码，实现了一个双向树形结构的编辑器：

<template>
  <div class="tree">
    <tree-node :node="root" :depth="0" :selected="selectedNode === root" @select="selectNode" @update="updateNode" />
  </div>
</template>

<script>
  import TreeNode from './TreeNode.vue'

  export default {
    components: {
      TreeNode
    },
    data() {
      return {
        root: {
          name: 'Root',
          children: [
            {
              name: 'Child 1',
              children: [
                {
                  name: 'Grandchild 1'
                },
                {
                  name: 'Grandchild 2'
                }
              ]
            },
            {
              name: 'Child 2',
              children: [
                {
                  name: 'Grandchild 3'
                },
                {
                  name: 'Grandchild 4'
                }
              ]
            }
          ]
        },
        selectedNode: null
      }
    },
    methods: {
      selectNode(node) {
        this.selectedNode = node
      },
      updateNode(node, name) {
        node.name = name
      }
    }
  }
</script>

<!-- TreeNode.vue -->
<template>
  <div class="tree-node" :class="{ selected }">
    <div class="node-header" @click="toggleChildren">
      <div class="node-icon">{{ expanded ? '-' : '+' }}</div>
      <div class="node-name" @dblclick="editName">{{ node.name }}</div>
    </div>
    <div class="node-children" v-if="expanded">
      <tree-node v-for="child in node.children"
                 :key="child.id"
                 :node="child"
                 :depth="depth + 1"
                 :selected="selected"
                 @select="$emit('select', child)"
                 @update="$emit('update', child, $event)" />
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      node: {
        type: Object,
        required: true
      },
      depth: {
        type: Number,
        required: true
      },
      selected: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        expanded: false,
        editing: false,
        newName: this.node.name
      }
    },
    methods: {
      toggleChildren() {
        this.expanded = !this.expanded
      },
      editName() {
        this.editing = true
        this.$nextTick(() => {
          this.$refs.nameInput.focus()
        })
      },
      saveName() {
        this.$emit('update', this.node, this.newName)
        this.editing = false
      },
      cancelEdit() {
        this.newName = this.node.name
        this.editing = false
      }
    }
  }
</script>

这个示例中，`Tree` 组件包含一个根节点，以及一个选中节点。根据根节点的结构，使用递归组件的方式将树形结构渲染成视图。每个节点组件包含一个 `node` 属性，表示当前节点的数据，以及一些交互逻辑。例如，当用户双击节点名称时，会触发 `editName` 方法，将节点的 `editing` 属性设置为 `true`，并在模板中展示一个编辑框供用户修改节点名称。当用户完成编辑时，会触发 `saveName` 方法，将新的节点名称保存到节点数据中。同时，节点组件还包含一个 `selected` 属性，用于判断当前节点是否被选中，以及一个 `select` 事件，用于在选中节点时更新 `selectedNode` 属性。最终，这个编辑器可以实现双向的树形数据编辑功能。