vue用name属性实现组件递归

最新推荐文章于 2023-10-26 16:53:58 发布

前端该溜子

最新推荐文章于 2023-10-26 16:53:58 发布

阅读量490

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/xye1230/article/details/119938030

版权

本文介绍了在Vue中如何通过组件递归实现无限层级的数据渲染。关键在于子组件利用`v-for`循环遍历接收到的`arrlist`属性，并在内部条件判断下继续渲染其children。父组件只需传递数据，子组件负责具体渲染过程。

摘要由CSDN通过智能技术生成

最近学到一招实用性的，假设一个对象里面可能无限有children，我们要无限循环渲染，应该怎么做？

vue里最简单的方法是用到name

上重点！

这个name方法的核心是需要写在子组件，真正拿到数据，v-for循环的地方是在子组件，也就是说，渲染的过程是在子组件，而父组件只需要引入就可以

父组件写法

<template>
  <div class="hello">
    <DetailList :arrlist="arrlist" />
  </div>
</template>

<script>
import DetailList from "./children.vue";
export default {
  name: "ArrList",
  components: {
    DetailList,
  },
  data() {
    return {
      arrlist: [
      {
          name: "苹果",
          price: "5$",
          children: [
            {
              name: "苹果1",
              price: "5$",
            },
            {
              name: "苹果2",
              price: "5$",
              children: [
                {
                  name: "苹果22",
                  price: "5$",
                },
                {
                  name: "苹果23",
                  price: "5$",
                },
              ],
            },
            {
              name: "苹果3",
              price: "5$",
            },
          ],
        },]
    };
  },
};
</script>

子组件写法

<template>
    <ul>
      <li v-for="item in arrlist" :key="item.index">
        {{ item.name }}
          <div v-if="item.children && item.children.length > 0 ? true : false">
            <detail-list :arrlist="item.children"> </detail-list>
          </div>
      </li>
    </ul>

</template>

<script>
export default {
  name: "DetailList",
  props: {
    arrlist: Array,
  },
};
</script>