vue for循环组件传值

vue for循环组件传值

• 循环组件

<componentAS v-for="item in objList" :key="item" :data='item' ></componentAS>

• js部分

<script>
import componentAS from './neww'
export default {
  components:{componentAS :componentAS},
  name: 'View',
  data () {
    return {
      objList:[
        {
         name:"apple",
         price:34,
         age:30,
         sex:'男'
      },
      {
         name:"banana",
         price:65,
         age:60,
         sex:'女'
      }
      ],
    }
  },

}
</script>

• 组件模块取值

<div>
        <h1>{{msg}}&nbsp;&nbsp;&nbsp;{{data.name}}:{{data.age}}</h1>
    </div>

• js部分

<script>
export default {
    name:'neww',
    props:['data'],
    data(){
        return{
            msg:'我是new'
        }
    }
}
</script>