vuejs中使用递归嵌套组件

 

最近在用 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>