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>
这种涉及到多层级的组件通信,建议使用vue的provide
和inject
从上层组件提供函数和数据给所有下层组件,下层接收使用
详细使用方式请查阅文档~
https://v3.cn.vuejs.org/guide/component-provide-inject.html
如有帮助请采纳回答谢谢~
常规做法时下面这种
<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>
这种涉及到多层级的组件通信,建议使用vue的provide和inject,或者一级一级向上发起事件
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!