Vue递归组件与跨级通信实现详解
作者：雾松时间：2026-10-25 08:20:05浏览：108
本文详解Vue中递归组件的自调用机制，通过命名组件并在模板中引用自身实现无限层级渲染。同时介绍父组件向孙子组件传递数据的方法，展示如何利用props在多层级结构中实现数据共享与通信。
在Vue开发中，实现组件的自调用是处理无限层级结构的关键技术。
父组件负责提供初始数据源，通常包含多层嵌套的结构信息。
<template>
<div>
<detail-list :list="categoryList"></detail-list>
</div>
</template>
<script>
import DetailList from './detailList.vue'
export default {
components: { DetailList },
data () {
return {
categoryList: [
{
title: '1',
children: [
{
title: '1-1'
},
{
title: '1-2'
},
]
},
{
title: '2',
children: [
{
title: '2-1'
},
{
title: '2-2'
},
]
}
]
}
}
}
</script>
子组件通过接收父组件传递的列表数据，并在模板中判断是否存在子节点。若存在，则再次调用自身组件，从而形成递归调用链，实现动态渲染。
<template>
<template>
<div>
<!--递归组件的应用===》可以通过组件命名来自己使用自己的组件-->
<div class="item" v-for="(item, index) in list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{ item.title }}
</div>
<div v-if="item.children" class="item-children">
<detail-list :list="item.children"></detail-list>
<!-- //自己使用自己的组件detailList -->
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList', //组件命名
props: {
list: Array,
},
data() {
return {}
},
}
</script>
爷孙通信指的是跨越中间层级，直接实现祖父组件与孙子组件之间的数据交互。这通常通过父组件作为中介，将数据层层传递，或利用Vuex等状态管理工具来解决深层级组件间的数据共享问题。
grand.vue
<template>
<div>
<detail-list :list="categoryList"></detail-list>
</div>
</template>
<script>
import DetailList from './detailList.vue'
export default {
components: { DetailList },
data () {
return {
categoryList: [
{
title: '1',
children: [
{
title: '1-1'
},
{
title: '1-2'
},
]
},
{
title: '2',
children: [
{
title: '2-1'
},
{
title: '2-2'
},
]
}
]
}
}
}
</script>
father.vue
<template>
<template>
<div>
<!--递归组件的应用===》可以通过组件命名来自己使用自己的组件-->
<div class="item" v-for="(item, index) in list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{ item.title }}
</div>
<div v-if="item.children" class="item-children">
<detail-list :list="item.children"></detail-list>
<!-- //自己使用自己的组件detailList -->
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList', //组件命名
props: {
list: Array,
},
data() {
return {}
},
}
</script>
chidren.vue
<template>
<div>
🎈爷爷
<br>
<div>GrandSon的回复：{{reply}}</div>
<father :msg1="msg1" :msg2="msg2" @getReply="getReply"></father>
</div>
</template>
<script>
import Father from './father.vue'
export default {
components: { Father },
data () {
return {
msg1: '1️⃣我是GrandFather，把第二条传给GrandSon',
msg2: '2️⃣GrandSon你好，我是GrandFather',
reply: '' // 接收来自GrandSon的消息
}
},
methods: {
/* 将获得的数据绑定到data中，便于视图层渲染 */
getReply (param) {
this.reply = param
}
}
}
</script>
通过合理设计组件命名与递归逻辑，可以高效解决复杂树形结构的渲染与通信需求。
以上就是本文的全部内容，希望能为读者提供有价值的参考，欢迎持续关注本站获取更多技术分享。
作者最新文章
Vue项目中怎么集成JS颜色选择器组件
2026-11-05 13:28:32
Nuxt 3 快速上手：项目初始化与目录结构详解
2026-11-03 19:16:51
怎么在 Vue 或 React 项目中正确集成 viewer.js
2026-11-02 09:17:48
Vue3+Vue-Router+Vite实现动态路由的完整流程与代码示例
2026-11-01 03:30:58
el-tree限制选中个数的实例
2026-11-01 03:09:07