ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue组件使用name属性来生成递归组件

2020-05-07 12:55:47  阅读:324  来源: 互联网

标签:vue name title 第一层 children 组件 id


先来个简单的数据

 1 lists =  [{
 2     id: 1,
 3     title: '第一层',
 4     children: [{
 5             id: 3,
 6             title: '第二层',
 7             children: [{
 8                 id: 4,
 9                 title: 第三层
10             }]
11         }]
12     },{
13     id: 2,
14     title: '第一层'
15 }]

上面的数据是个很简单的数据,一个数组,嵌套了3层,即id为1为祖,id为3为父,id为4位孙。

创建一个简单的单组件,list.vue,name属性为list

 1 <template>
 2   <div>
 3     <div
 4       class="item"
 5       v-for="(item, index) in lists"
 6       :key="index"
 7     >
 8       <div class="item-title">
 9         {{item.title}}
10       </div>
11       <div v-if="item.children" class="item-children">
12         <!-- 调用自己,将数据传递进去,一定要加判断数据是否存在,以防出bUG -->
13         <!-- 使用组件nama属性list来调用 -->
14         <list :list="item.children"></list>
15       </div>
16     </div>
17   </div>
18 </template>
19 
20 <script>
21 export default {
22   // name主要是为了使用递归组件
23   name: 'DetailList',
24   props: {
25     // 数据上方
26     lists Array
27   }
28 }

渲染结果为:

  第一层

  第二层

  第三层

  第一层

好像有点难分,给item-children加个padding-left属性,

如padding-left: .2rem

渲染结果大概是:

  第一层

    第二层

      第三层

  第一层

用来做树型数据的列表往往很好用,节省了代码。

标签:vue,name,title,第一层,children,组件,id
来源: https://www.cnblogs.com/lsAxy/p/12842296.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有