首页 > 其他 > 详细

Vue中使用递归嵌套组件

时间:2021-08-15 11:49:21      阅读:28      评论:0      收藏:0      [点我收藏+]

 

最近在用 uniapp 写一个小程序,使用到了uniapp的 collapse 组件 去实现一个 树形下拉列表,考虑到树形结构,就自己封装了下组件用于递归

具体实现

template

<view  class="" v-for="(item, index) in list" :key="index">
            
            <u-collapse :head-style="headStyle" v-if="item.Children.length>0">
                <u-collapse-item  :title="item.Name" >
                    <u-line color="red" />
                    <collapse-nest   :list="item.Children"></collapse-nest>
                </u-collapse-item>
            </u-collapse>
            <view v-if="item.Children.length==0">
            
                <view  @click="method(item)" class="questionlink">{{item.Name}}</view>    
                
            </view>
</view>

 

props:

props: {
            list: Array,
            method:{
                type:Function,
                default:function(){
                    return function(item){
                        console.log("nest:",item)
                    }
                    
                }
            
            }
}

 

父组件调用:

<collapse-nest  :method="method" :list="tikuTree" ></collapse-nest>
methods: {
            method(item){
                console.log("parent",item)
            }
}

 

技术分享图片 出现的问题

树是正常展示出来了,可是当我点击 子组件这部分的时候

<view  @click="method(item)" class="questionlink">{{item.Name}}</view>

一直显示的是子组件 props method 中 default 的逻辑,父组件中注册的方法没有效果。

即一直输出 nest xxxxxx

无奈之下,我怀疑自己写错了,检查了很多遍 props 那块的代码,也没发现啥问题 技术分享图片

我尝试使用了 this.$emit 的方式 进行子传父,突然明白 我是递归嵌套,子组件中还有一层自己 技术分享图片

那改一下代码 :

在子组件中 把需要传递的 props 在绑定一下。

<collapse-nest        :method="method"         :list="item.Children"></collapse-nest>

Vue中使用递归嵌套组件

原文:https://www.cnblogs.com/lucky528/p/15142634.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!