知名企业网站分析 比较评估,指数函数和对数函数,软件ui设计培训机构,服务器网站扩容 一年1G价格目录 组件递归子组件父组件 组件递归
当要渲染一个目录时#xff0c;因为可能有嵌套数据#xff0c;并且组件的层级未知#xff0c;可以使用组件递归来解决
注意点#xff1a;
1#xff0c;使用递归时必须提供 name#xff0c;也就是通过组件的 name 递归自己。
2因为可能有嵌套数据并且组件的层级未知可以使用组件递归来解决
注意点
1使用递归时必须提供 name也就是通过组件的 name 递归自己。
2注意组件事件传递。
举例
子组件
templateulli v-for(item, index) in list :keyindexspan clickhandleClick(item){{ item.name }}/spanRecursionList v-ifitem.children?.length :listitem.children clickItemhandleClick//li/ul
/templatescript
export default {name: RecursionList,props: {list: {type: Array,default: () []}},methods: {handleClick(item) {this.$emit(clickItem, item)}}
}
/script父组件
templateRecursionList :listlist clickItemgetItem /
/templatescript
import RecursionList from ./components/RecursionList.vue
export default {components: {RecursionList},data() {return {list: [{ name: a }, { name: b }, { name: c, children: [{ name: ca }, { name: cb }, { name: cc, children: [] }] }]}},methods: {getItem(item) {console.log(item)}}
}
/script以上。
