组件封装

pages=》HotGood.vue

<template>
    <div>
        <div class="cy_title">
        <van-nav-bar title="人气推荐" />
    </div>
  <div class="hot_main">
      <ul>
        <li v-for="(item, index) in Hotgood" :key="index" >
          <Good :json="item"> </Good>
        </li>
      </ul>
    </div>
    </div>
</template>

<script>
import Good from '@/components/Good'
export default {
    data () {
        return {
              Hotgood:[],
        }
    },
    mounted(){
         this.$axios.get("/shop/goods/list").then(res => {
      this.Hotgood = res.data;
    });
    },
    components: {
       Hotgood
    },
}

</script>

componments=>Good.vue

<template>
    <div class="cy_m">
        <img :src="json.pic" alt />
          <p>{{ json.name }}</p>
          <p>{{ json.characteristic }}</p>
          <p>￥{{ json.originalPrice }}</p>
    </div>
</template>

<script>
export default {
    props:['json']
}
</script>