vue组件通信_父向子-配合循环 v-for

vue组件通信_父向子-配合循环

目的: 把数据循环分别传入给组件内显示

数据

list: [
    { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
    { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
    { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],

<template>
  <div>
      <!--3. 使用组件 -->
<MyproDuct 
v-for="item  in list"
:key="item.id"
:title="item.proname"
:price="item.proprice"
:info="item.info"
></MyproDuct>
  </div>
</template>

<script>
// 1.引入组件
import MyproDuct from './components/MyproDuct.vue'
export default {
    data () {
        return {
    list: [
    { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
    { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
    { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
    ],
        }
    },
    //2. 注册组件
components: {
    MyproDuct:MyproDuct
}
}
</script>

<style>

</style>