Vue一个案例引发的递归组件的使用详解

首先我们先创建一个 List 的递归组件

<template>
 <div>
  <div class="list-item" v-for="(item, index) in list" :key="index">
   <div class="item-name">
    <span>{{item.name}}</span>
   </div>
   <div v-if="item.children" class="children-item">
    <list :list="item.children"></list>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 name: "List",
 props: {
 list: Array
 }
};
</script>

注意上面的代码中我们使用了 List 组件本身，完成这些之后，我们在外部父级组件中使用 List 组件时，不管我们的数据有多少层嵌套关系，都可以完美的自适应加载，我们再也不用通过嵌套嵌套在嵌套了。

<template>
 <div class="list-detail">
  <list :list="list"></list>
 </div>
</template>
<script>
import List from "./components/List";
export default {
 name: "Parent",
 components: { List },
 data() {
 return {
  list: [{
   name: "经济",
   children: [{
    name: "如家",
    children: [{
     name: "上江路-如家"
    },
    {
     name: "望江路-如家"
    }]   },{
    name: "7天",
    children: [{
     name: "长江路-7天"
    },
    {
     name: "望江路-7天"
    }]   }]  }] }
 }
}
</script>

最后我们来看看渲染后的结果

总结

如上就是我们今天要说的递归组件，小伙伴们赶紧上手试试吧。

类似与信息分类的展示在我们的项目中是非常常见的形式，我们利用递归组件可以很好的去解决问题

以上所述是小编给大家介绍的Vue一个案例引发的递归组件的使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！