Vue递归组件
2023-06-13 09:17:16 时间
Vue递归组件
1、递归组件
组件可以在自己的模板种递归调用自身,但这需要使用name
选项为组件指定一个内部调用的名称。当调用Vue.createApp({}).component({})
全局注册组件时,这个全局的ID会自动设置为该组件的name
选项。
递归组件和程序语言中的递归函数调用一样,都需要有一个条件结束递归,否则就会导致无限循环。例如,可以通过v-if指令(表达式计算为假时)结束递归。
2、实例
下面看一个分类树状显示的例子,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<category-component :list="categories"></category-component>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const CategoryComponent = {
name: 'catComp',
props: {
list: {
type: Array
}
},
template: `
<ul>
<!-- 如果list为空,表示没有子分类了,结束递归 -->
<template v-if="list">
<li v-for="cat in list">
{{cat.name}}
<catComp :list="cat.children"/>
</li>
</template>
</ul>
`
}
const app = Vue.createApp({
data(){
return {
categories: [
{
name: '程序设计',
children: [
{
name: 'Java',
children: [
{name: 'Java SE'},
{name: 'Java EE'}
]
},
{
name: 'C++'
}
]
},
{
name: '前端框架',
children: [
{name: 'Vue.js'},
{name: 'React'}
]
}]
}
},
components: {
CategoryComponent
}
}).mount('#app');
</script>
</body>
</html>
渲染结果:
想想递归函数这个就很好理解了
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- Vue专题 03_那些年你见没见过的指令(v-?)
- 深入浅出,带你看懂Vue组件间通信的8种方案
- Vue中组件通信
- 细说分片上传与极速秒传(SpringBoot+Vue实现)
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- Vue组件通信的三种方式
- vue子组件调用父组件中方法的方式合集
- 如何在vue组件中引入外部的css和js文件[通俗易懂]
- vue父组件调用子组件方法返回值_vue子组件修改父组件值
- vue父组件调用子组件属性_vue子组件获取父组件实例
- vue纯前端分页_基于vue的表格组件
- vue-devtools工具的安装和使用
- 从零到一手写迷你版Vue_2023-02-28
- 富文本vue-quill-editor结合el-element实现自定义上传组件
- Vue Loader 篇(下):编写一个单文件 Vue 组件
- Vue Router深入学习(一)
- Vue 快速入门(一)
- Vue入门 基本使用 与 事务管理【1】
- Vue使用插槽分发内容
- vue入门篇之Vue.js 组件
- linux下快速部署Vue项目(linux部署vue)
- vue 保持组件状态防止重新渲染 缓存组件失效详解编程语言
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)