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