【Vue.js技术专题】组件的递归

>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享孙卫琴的Java技术专稿和著作

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『孙卫琴姐姐的Java技术专栏』 → 【Vue.js技术专题】组件的递归

您是本文章第 8426 个阅读者

* 贴子主题: 【Vue.js技术专题】组件的递归

点赞(0) 收藏

作者:sunweiqin 发表时间：2022-08-29 16:15:45

消息

查看

搜索

好友

邮件

复制

引用

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

在一个组件的模板中，还可以嵌套自身组件，这样就构成了组件的递归。为了避免无限递归，需要设置递归的结束条件。在例程1的recursive.html中，<category>组件的模板会插入自身组件，从而递归遍历访问list数组中的所有嵌套的元素。模板中“<template v-if="list">”的v-if指令用来设置递归结束条件，当list数组为空，就结束递归。

例程1 recursive.html

    <div id="app">
      <category :list="items"></category>
    </div>

    <script>
      const app=Vue.createApp({
        data(){
          return {
            items:[{
              type:'生物',
              subtype:[
                {
                   type:'植物',
                   subtype:[{type:'树木'},{type:'灌木'},{type:'青草'}]
                },
                {
                   type:'动物',
                   subtype:[{type:'猫'},
                              {type:'狗'},
                              {type:'鱼',
                               subtype:[{type:'鲤鱼'},{type:'鲨鱼'}]}
                             ]
                }
              ]
            }]
          }
        }
      })

      app.component('category', {
        props:{
          list:{type:Array}
        },
        template: ` <ul><template v-if="list">
            <li v-for="item in list">
               {{item.type}}
               <category :list="item.subtype"></category>
            </li>
          </template></ul> `
      })
      app.mount('#app')
    </script>

通过浏览器访问recursive.html，会得到如图1所示的网页，list数组中的嵌套内容会以缩进对齐的方式一层层展示出来。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小