美文网首页简明uniapp教程uni - app
关于详情页是如何获取到列表数据问题(其实就是父传子)

关于详情页是如何获取到列表数据问题(其实就是父传子)

作者: 晚安_bd35 | 来源:发表于2019-06-12 11:18 被阅读2次
  • 父组件中有一个点击事件 从而触发子组件
    detail 里面的变量为父组件要给子组件传过去的数据
    把detail 凭借在路径后面 传给子组件
goxiugai:function(m){
                
                let detail = {
                    rate:m.rate,
                    into:m.into,
                    id: m.id,
                    title: m.name
                };
                uni.navigateTo({
                    url: './xiugai/xiugai?detailDate=' + encodeURIComponent(JSON.stringify(detail))
                });
                    console.log(detail)
                    
            },
  • 子组件接收
    因为要一进来就渲染到页面上 所以要在onLoad 里接收
    event 为形参 可以打印一下event 看一下传过来的是什么
    定义一个变量 payload 接收
data() {
            return {
                banner:{},
                
        }
},
onLoad(event) {
            const payload = event.detailDate || event.payload;
            // 目前在某些平台参数会被主动 decode,暂时这样处理。
            try {
                this.banner = JSON.parse(decodeURIComponent(payload));
            } catch (error) {
                this.banner = JSON.parse(payload);
            }
            console.log(this.banner)
            
        },

这样就可以直接用了

<view class="header">
    <view class="tit">{{banner.title}}</view>
</view>

相关文章

网友评论

    本文标题:关于详情页是如何获取到列表数据问题(其实就是父传子)

    本文链接:https://www.haomeiwen.com/subject/slukfctx.html