Vue中使用递归嵌套组件

 

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

 

Vue中使用递归嵌套组件 出现的问题

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

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

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

即一直输出 nest xxxxxx

无奈之下,我怀疑自己写错了,检查了很多遍 props 那块的代码,也没发现啥问题 Vue中使用递归嵌套组件

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

那改一下代码 :

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

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

Vue中使用递归嵌套组件

上一篇:VMware上面CentOS7网卡名称不为eth0


下一篇:DialogFragment 详解