vue 递归组件

最新推荐文章于 2024-06-15 14:41:39 发布

克里斯蒂亚诺更新

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量175

点赞数 2

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_36152801/article/details/137837755

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

当你使用Vue的递归组件时，你通常会创建一个组件，该组件在其模板中引用自身，从而创建一个递归结构。这种结构特别适用于处理树形数据或嵌套结构。

下面是一个简单的示例，演示了如何使用Vue的递归组件来呈现一个简单的树形结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Recursive Component Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <ul>
    <list-item :item="tree"></list-item>
  </ul>
</div>

<script>
// 定义递归组件
Vue.component('list-item', {
  props: ['item'],
  template: `
    <li>
      {{ item.name }}
      <ul v-if="Array.isArray(item.children)">
        <list-item v-for="child in item.children" :key="child.id" :item="child"></list-item>
      </ul>
    </li>
  `
});

new Vue({
  el: '#app',
  data: {
    tree: {
      id: 1,
      name: 'Root',
      children: [
        {
          id: 2,
          name: 'Child 1',
          children: [
            {
              id: 3,
              name: 'Grandchild 1',
              children: []
            },
            {
              id: 4,
              name: 'Grandchild 2',
              children: []
            }
          ]
        },
        {
          id: 5,
          name: 'Child 2',
          children: []
        }
      ]
    }
  }
});
</script>

</body>
</html>

在这个例子中，我们有一个list-item组件，它接受一个名为item的prop。在组件的模板中，我们首先显示item的名称，然后检查它是否有子项。如果有子项，我们使用v-for指令迭代子项，并在每个子项上递归地渲染list-item组件。

通过这种方式，我们可以创建一个可无限嵌套的树形结构，每个节点都是相同的组件类型，这是递归组件的强大之处。

克里斯蒂亚诺更新

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 递归组件

当你使用Vue的递归组件时，你通常会创建一个组件，该组件在其模板中引用自身，从而创建一个递归结构。这种结构特别适用于处理树形数据或嵌套结构。通过这种方式，我们可以创建一个可无限嵌套的树形结构，每个节点都是相同的组件类型，这是递归组件的强大之处。的名称，然后检查它是否有子项。如果有子项，我们使用。在组件的模板中，我们首先显示。指令迭代子项，并在每个子项上递归地渲染。在这个例子中，我们有一个。组件，它接受一个名为。
复制链接

扫一扫