vue笔记 递归组件的使用
2023-09-27 14:26:14 时间
递归组件
什么是递归组件?
组件自身去调用组件自身。
代码示例
DetailList.vue(子组件-递归组件)
<template> <div> <div class="item" v-for="(item,index) of list" :key="index"> <div class="item-title border-bottom"> <span class="item-title-icon"></span> {{item.title}} </div> <!--递归组件:DetailList调用自身--> <div v-if="item.children" class="item-children"> <detail-list :list="item.children"></detail-list> </div> </div> </div> </template>
Detail.vue(父组件)
<template> <div> <detail-banner></detail-banner> <detail-header></detail-header> <div class="content"> <detail-list :list="list"></detail-list> </div> </div> </template>
<script> import DetailBanner from './components/Banner.vue' import DetailHeader from './components/Header.vue' import DetailList from './components/List.vue' export default{ name: 'Detail', components: { DetailBanner, DetailHeader, DetailList }, data(){ return { list: [{ title: '成人票', children: [{ title: '成人3馆联票', children: [{title: '成人3馆联票-成都'}, {title: '成人3馆联票-上海'}, {title: '成人3馆联票-北京'}, {title: '成人3馆联票-河南'}] }, { title: '成人4馆联票' }, { title: '成人5馆联票' }, { title: '成人6馆联票' }] }, { title: '学生票' }, { title: '儿童票' }, { title: '特惠票' }] } } } </script>
注意:父组件中的数据结构是二维数组。子组件调用自身之后,对于css样式,我们只要仅仅关注一级列表即可,二级列表会自动使用相同的样式。如图:
相关文章
- Vue.js 中的动态路由
- Vue 中通过事件总线方式组件间传递数据及调用 Vue脚手架中的axios数据调用方式获取github提供的用户接口数据信息
- vue中v-model修饰符的使用和组件使用v-model
- 01 vue子组件调用父组件中的方法
- Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
- [Full-stack] 增量开发框架 - Vue.js
- Vue简单基础 + 实例 及 组件通信
- vue 新闻列表滚动效果
- vue-color 颜色选择器插件用法介绍
- Vue组件
- Vue.js 渲染简写样式存在的问题
- Vue父子组件双向数据绑定
- vue系列:跳转到同一个路由参数不同但是不触发更新的问题
- 基于Vue封装分页组件
- vue里怎么实现文本溢出才显示title提示
- vue编写的移动端筛选条组件。
- 使用vue2.0 vue-router vuex 模拟ios7操作
- Vuejs(15)——Vue的异步组件
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
- Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS
- 使用vue-router切换页面时,获取上一页url以及当前页面url
- 解决vue项目一直报格式错误
- vue——请求跨域时,vcli2/vcli3设置代理
- 前端学习之VUE基础五(Vuex):Vuex概述、Vuex的基本使用、Vuex的核心概念