十二 首页 热销爆品开发修改商品值（修改相同组件的rpx值，一个组件多次利用，样式不同）

目录结构：

子组件接收参数之后绑定形式是这样的，注意拼接方式：调用的是公共组件 ，作用：将原来默认展示2个图片，改为展示3个了，

hot.vue

<script>
        import commodity from '@/components/common/commodity.vue'
        export default{
                components:{
                        commodity
                },
                data(){
                        return{
                                hotList:[	{
                                                id:1,
                                                img:'../../static/img/hot.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'299',
                                                oprice:'699',
                                                discount:'5.5'
                                        },
                                        {
                                                id:2,
                                                img:'../../static/img/hot.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'269',
                                                oprice:'699',
                                                discount:'5.5'
                                        },
                                        {
                                                id:3,
                                                img:'../../static/img/hot.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'289',
                                                oprice:'688',
                                                discount:'5.5'
                                        }]
                        }
                }
        }
</script>

<style>
</style>

banner.vue

<template>
        <view class="banner">
                <image class="banner-img" src="../../static/img/run-banner.png" mode=""></image>
                <icons></icons>
                <card name="热销商品"></card>
                <hot></hot>
        </view>

</template>

<script>
        import icons from './icons.vue'
        import card from '@/components/common/card.vue'
        import hot from '@/components/index/hot.vue'
        export default{
                components:{
                        icons,
                        card,
                        hot
                }
        }
</script>

<style scoped>
        .banner-img{
                width: 100%;
                height: 400rpx;
        }
</style>