vue递归组件是什么及怎么实现

本篇内容介绍了“vue递归组件是什么及怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

递归所指的是程序自己调用自身，而vue中的递归组件就是组件自身调用自身。

实现方法如下：

准备一个父组件存放递归数据，再创建一个子组件作为递归调用的组件，从而实现递归。

1.父组件。

<template>   <div id="app">         <category :datalist="datalist"></category>   </div> </template>   <script>   import category from './category.vue' export default {   name: 'app',   data () {     return {       datalist:[         {           title:'手机',           level:1,           children:[             {               title:'三星',               level:2,               children:[                     {                    title:'三星1',                    level:3                   }                  ]             },             {               title:'华为',               level:2             },             {               title:'苹果',               level:2             }           ]         }             ]   }  },   components:{     category   },   created() {    } } </script>   <style>   </style>

2.子组件。

<template>   <div id="phone">      <div v-for="(item ,index) in datalist" :key="index">    {{item.title}}    <div v-if="item.children" class="item-chilren">    <phone :datalist="item.children"></phone>    </div>    </div>      </div> </template>   <script> export default {   name: 'phone',   data () {     return {     }   },   props:{   datalist:Array   },   created() {    } } </script>   <style> .item-chilren{ }   .item-chilren div{ padding: 2px; padding-left: 20px; margin-bottom: 2px; } </style>

“vue递归组件是什么及怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！