Vue3 组件递归中,递归下 调用 父父 组件的方法,请教

Question

Vue3 组件递归，
一个目录树的组件：

一、父组件中 循环 TreeItme 组件

父组件中：
 <TreeItme v-for="item in menuCustomData" :key='item.key' :item="item" @methodA='methodA' />  / 给子组件绑定方法A

二、TreeItme 子组件中 递归 循环自身

<template>
    // 其它代码略
    const emit = defineEmits(['methodA ',])
    emit('methodA ')  // 调用父组件的方法, 第一层可以调用到, 但是下面的代码没法调用到 这个方法
    <TreeItem style="position: relative; left:67px;" v-if="itemVisible" v-for='(v,i) in item.children' :key='i' :item='v'/> // 递归 自已, 这里无法调用 methodA
</template>

Answer 1

这种涉及到多层级的组件通信，建议使用vue的provide和inject
从上层组件提供函数和数据给所有下层组件，下层接收使用

详细使用方式请查阅文档~
https://v3.cn.vuejs.org/guide/component-provide-inject.html

如有帮助请采纳回答谢谢~

Answer 2

常规做法时下面这种

<TreeItme v-for="item in menuCustomData" :key='item.key' :item="item" @methodA='methodA' >
    <TreeItem style="position: relative; left:67px;" v-if="itemVisible" v-for='(v,i) in item.children' :key='i' :item='v' @methodA='methodA' />
</TreeItme>

Answer 3

这种涉及到多层级的组件通信，建议使用vue的provide和inject，或者一级一级向上发起事件

Answer 4

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632