uniapp黑马商城从商品展示页跳转到商品详情页，传递goodsId

用到技术详解（通俗）

使用自定义事件，子组件（非页面）传值到父组件（index.页面）

父组件（tabbar页）使用uni.navigate传值给详情页

详情页通过onLoad来接收参数。

1.goods-list页，使用自定义事件传递id给index页面

<template>
    <view class="goods" >
        <view class="good" v-for="item in goods" :key="item.goods_id" @click="toDetail(item.goods_id)">
            <img class="img" :src="item.goods_small_logo" alt="" srcset="">
            <view class="font">
                <text class="price">￥{{item.goods_price}}</text>
                

                <text class="name">{{item.goods_name}}</text>
            </view>
        </view>
    </view>
</template>


<script>
    export default {
        props: ["goods"],
        data() {
            return {
                // goods: []
            }
        },
        methods: {
            toDetail(goodsId){
                this.$emit("toDetail",goodsId);
                console.log("goods-list",goodsId);
            }
        },
        onload(){
            this.getGoodsInfo()
        }
    }
</script>


<style lang="scss">
    .goods{
        width: 320px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-content: space-around;
        
        .good{
            margin-top: 5px;
            width: 150px;
            background-color: #ffffff;
            text-align: center;
            img{
                width: 130px;
                height: 185px;;
            }
            .font{
                width: 80%;
                font-size: 14px;
                .price{
                    color: red;
                }
            }
        }
    }
</style>

2.index.vue接收参数goodsId

<goodsList :goods="goods" @toDetail = "toDetail"></goodsList>

// 导航到商品详情页
            goGoodsDetail (goods_id) {
                uni.navigateTo({
                    url: '/pages/goods-detail/goods-detail?goods_id='+goods_id,
                })
            }

3.detail.vue接收goodsId,使用了页面周期函数

onLoad(option){
            console.log(option.goodsId)
        }