最近在用 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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性