|
|
本文参考孙卫琴，杜聚宾所创作的 <<精通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数组中的嵌套内容会以缩进对齐的方式一层层展示出来。
图1 recursive.html的网页
程序猿的技术大观园：www.javathinker.net
|
网站系统异常
| 系统异常信息 |
Request URL:
http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=4219&skin=0&saveSkin=true&pages=1&replyNum=
java.lang.NullPointerException
如果你不知道错误发生的原因，请把上面完整的信息提交给本站管理人员。
|
|
Java技术网站 → 『 Java开发技术 』 → 『 孙卫琴姐姐的Java技术专栏 』 → 【Vue.js技术专题】组件的递归
消息
查看
搜索
好友
邮件
复制
引用