>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8425 个阅读者 刷新本主题
 * 贴子主题:  【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+鼠标滚轮放大或缩小
图1  recursive.html的网页






程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->第一个Java程序
  JavaWeb开发-->Web运作原理(Ⅱ)
  JSP与Hibernate开发-->JPA API的高级用法
  Java网络编程-->Socket用法详解
  精通Spring-->Vue简介
  Vue3开发-->绑定表单
  【Vue.js技术专题】路由管理器的基本用法
  【Spring Cloud Alibaba专题】Dubbo框架中提供者回调消费者
  【Spring专题】把Model的数据存放在session范围
  【Spring专题】用AOP和SLF4J输出日志的范例
  【Spring专题】RestTemplate类与RESTFul风格的请求
  【Vue专题】Vue组件的CSS过渡模式
  【持久化专题】JPA API的级联操作
  【持久化专题】用@Formula注解映射派生属性
  【持久化专题】@Enumerated注解映射枚举类型
  【持久化专题】@Access注解设定Hibernate访问类的属性的方式
  【持久化专题】FetchType.LAZY延迟检索策略
  【持久化专题】通过JPA API调用存储过程
  【持久化专题】EntityManager和Session的merge()方法详解
  【Java网络编程专题】盘点用Java抓取HTTP服务器和FTP服务器的...
  【Java网络编程专题】通过JDBC API调用存储过程
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。