Hello World ~~~

Fork me on GitHub
lucky528

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
统计
 

 

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

 

Smile with tongue out 出现的问题

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

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

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

即一直输出 nest xxxxxx

无奈之下,我怀疑自己写错了,检查了很多遍 props 那块的代码,也没发现啥问题 Baring teeth smile

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

那改一下代码 :

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

<collapse-nest        :method="method"         :list="item.Children"></collapse-nest>
posted on   gopher666  阅读(344)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
 
点击右上角即可分享
微信分享提示