Vue递归组件使用实践：动态生成Tree树形控件实例，功能齐全

2023-10-29 22:05:34

使用Vue递归组件构建树形控件：初学者指南

树形控件是一种广泛应用于用户界面中的组件，用于以分层结构可视化数据。利用Vue的强大功能，我们可以轻松使用递归组件来创建交互式且可动态更新的树形控件。

Vue递归组件概述

递归组件是能够嵌套自身从而形成复杂结构的特殊类型组件。通过在组件模板中使用<component>元素，并指定is属性指向要呈现的组件名称，可以创建递归组件。

将JSON数据动态生成树形目录

为了将JSON数据动态生成树形目录，我们需要创建一个Vue组件来表示树的节点。节点组件应包含一个名为children的数组，用于存储子节点。然后，使用递归遍历JSON数据结构，并为每个节点创建一个组件实例。

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      {{ node.name }}
      <tree-node v-if="node.children" :nodes="node.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['nodes'],
  components: { TreeNode },
};
</script>

初始化选中节点

可以使用Vue的v-model指令来初始化选中节点。v-model在组件模板和数据之间建立双向绑定。

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <input type="checkbox" v-model="selectedNodes" :value="node.id">
      {{ node.name }}
      <tree-node v-if="node.children" :nodes="node.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['nodes'],
  components: { TreeNode },
  data() {
    return { selectedNodes: [] };
  },
};
</script>

手动选中节点

使用Vue的$emit方法可以手动选中节点。$emit触发组件内的事件。

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <input type="checkbox" @click="selectNode(node)">
      {{ node.name }}
      <tree-node v-if="node.children" :nodes="node.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['nodes'],
  components: { TreeNode },
  methods: {
    selectNode(node) {
      this.$emit('select-node', node);
    },
  },
};
</script>

打印所有选中节点

可以使用Vue的watch方法来打印所有选中节点。watch监控数据属性的变化。

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <input type="checkbox" @click="selectNode(node)">
      {{ node.name }}
      <tree-node v-if="node.children" :nodes="node.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['nodes'],
  components: { TreeNode },
  methods: {
    selectNode(node) {
      this.$emit('select-node', node);
    },
  },
  watch: {
    selectedNodes: {
      handler(newValue, oldValue) {
        console.log(newValue);
      },
      deep: true,
    },
  },
};
</script>