46-实现列表跳转详情并传递

<template>
    <view class= 'news'>
      <news-item @itemClick='goDetail' :list='newslist'></news-item>
    </view>
</template>
<script>
    import newsItem from '../../components/news-item/news-item'
    export default {
        data() {
            return {
                newslist:[]
            }
        },
        components:{
            "news-item":newsItem
        },
        methods: {
            async getNews (){
                const res = await this.$myRequest({
                    url:'/api/getnewslist'
                })
                this.newslist = res.data.message
                console.log(this.newslist)
            },
            goDetail(id){
                uni.navigateTo({  //保留当前页面跳转到另外的页面
                url:'/pages/news-detail/news-detail?id='+id,
                })
            }
        },
        onLoad(){
            this.getNews()
        }
    }
</script>
<style lang='scss'>
.news{
}
</style>

news-item

<template>
        <view>
            <view class='news_item' @click='navigator(item.id)' v-for='item in list' :key='item.id'>
                <image :src='item.img_url'></image>
                <view class='right'>
                    <view class='tit'>
                        {{item.title}}
                    </view>
                    <view class='info'>
                        <text>发表时间：{{item.add_time | formatDate}}</text>
                        <text>浏览:{{item.click}}</text>
                    </view>
                </view>
            </view>
        </view>
</template>
<script>
    export default{
        props:['list'],
        filters:{    //定义了过滤器
            formatDate(date){
                const nDate = new Date(date)
                const year = nDate.getFullYear().toString().padStart(2,0)
                const month = nDate.getMonth().toString().padStart(2,0)
                const day = nDate.getDay().toString().padStart(2,0)
                return year+'-'+month+'-'+day
            }
        },
        methods:{
            navigator(id){
                this.$emit('itemClick',id)  //发送
            }
        }
    }
</script>
<style lang='scss'>
.news_item{
        display: flex;
        padding:10rpx 20rpx;
        border-bottom:1px solid $shop-color;
        image{
            min-width:200rpx;
            max-width: 200rpx;
            height:150rpx;
            border:1px dashed #007AFF;    
        }
        .right{
            margin-left:15rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .tit{
                font-size: 33rpx;
            }
            .info{
                font-size: 25rpx;
                text:nth-child(2){
                    margin-left:30rpx;
                }
            }
        }
    }
</style>