48-点击商品列表导航至商品详情页

组件goods-list 代码如下：

<template>
    <view class='goods_list'>
        <view class='goods_item' v-for="item in goods" :key="item.id" @click="navigator(item.id)">
            <image :src='item.img_url'></image>
            <view class='price'>
                <text>￥{{item.sell_price}}</text>
                <text>￥{{item.market_price}}</text>
            </view>
            <view class="name">
                {{item.title}}
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props:['goods'],  //goods传递过来的数据
        methods:{
            navigator(id){
                this.$emit('goodsItemClick',id)
            }
        }
    }
</script>
<style lang='scss'>
    .goods_list {
        padding: 0 15rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .goods_item {
            background: #fff;
            width: 355rpx;
            margin: 10rpx 0;
            padding: 15rpx;
            box-sizing: border-box; //不会撑开盒子了
            image {
                width: 95%;
                height: 200px;
                display: block;
                margin: 0 auto; //上面下面实现居中
            }
            .price {
                color: $shop-color;
                font-size: 36rpx;
                margin: 5rpx 0;
                text:nth-child(2) {
                    color: #CCC;
                    font-size: 28rpx;
                    margin-left: 17rpx;
                    text-decoration: line-through;
                }
            }
            .name {
                font-size: 22rpx;
                line-height: 40rpx;
            }
        }
    }
</style>

上面的代码需要注意的是：在每条数据创建点击事件，然后用$emit传递给父组件。
父组件用传递过来的函数名称进行接受，比如这里使用的是 goodsItemClick 所以两边都需要用一致的函数名称。

这个时候在商品列表也是不起作用

• 组件里面加入了传递父组件的函数名称
• 商品列表页里面也是需要接受的函数名称的
• 因为主页里面加了函数但列表页没有，所以不起作用，解决办法就是在商品列表也也加入该函数

<template>
    <view class='goods_list'>  <!--加入灰色的背景-->
        <goods-list @goodsItemClick='goDetail' :goods="goods"></goods-list>
        <view class='isOver' v-if='flag'>---我是有底线的---</view>
    </view>
</template>
<script>
    import goodsList from '../../components/goods-list/goods_list.vue'
    export default {
        data() {
            return {
                pageindex:1,
                goods:[],
                flag:false
            };
        },
        components:{
            'goods-list':goodsList
        },
        methods:{
            //获取商品列表数据
            async getGoodsList(callback){
                const res = await this.$myRequest({
                    url : '/api/getgoods?pageindex='+this.pageindex
                })
                //this.goods = res.data.message
                this.goods = [...this.goods,...res.data.message]
                callback && callback()  //如果有这个回调函数就调用
            },
            goDetail (id){
                uni.navigateTo({
                    url:'/pages/goods-detail/goods-detail?id='+id
                })
            }
        },
        onLoad(){
            this.getGoodsList()
        },
        //下拉刷新
        onReachBottom() {   //触底就会触发这个函数
            console.log('触底反弹')
            if(this.goods.length<10*(this.pageindex-1)){
                return this.flag = true        
                    }
            this.pageindex++    //页码书进行加1
            this.getGoodsList()
        },
        onPullDownRefresh() {
            console.log('下拉刷新了')
            this.pageindex = 1
            this.goods= []
            this.flag = false
            setTimeout(()=>{
                this.getGoodsList(()=>{
                    uni.stopPullDownRefresh()
                })
            },1000)
        }
    }
</script>
<style lang="scss">
.goods_list{
    background: #eee;
}
.isOver{
    width:100%;
    height:50px;
    line-height: 50px;
    text-align: center;
    font-size:28px;
}
</style>