Vue组件通信：父传子的简易理解

在Vue的组件中，数据总会在父子组件中来回传递，今天来简单理解一下Vue组件的父传子通信

在这里我使用了三个组件，层层调用

//Detail.vue    GoodList的父组件
<template>
	<!--recommends是Detail.vue中通过向服务器发送请求传来的数据-->
	<goods-list :goods="recommends"></goods-list>
</template>

//GoodList.vue    GoodListItem的父组件,Detail的子组件
<template>
	<goods-list-item 
	v-for="(item,index) in goods" 
	:goods-item="item" 
	:key="index">
	</goods-list-item>
</template>
<script>
  export default {
	name: "GoodsList",
  	props:{
    goods:{
      type:Array,
      	default(){
        	return []
      	}
    }
  },
</script>

//GoodListItem.vue    GoodList的子组件
<template>
	<span>{{goodsItem.title}}</span>
	<span>{{goodsItem.price}}</span>
</template>
<script>
export default {
	name: "GoodsListItem",
  	props:{
    goodsItem:{
      type:Object,
      	default(){
        	return {}
      	}
    }
  },
</script>

父组件向子组件传递数据：是通过在子组件中定义props属性来接受父组件传来的数据

如上图，父传子的过程：

1. recommends是父组件从服务器请求过来的数据，它传给了goods，goods是在GoodList.vue里定义的props属性
2. goods又被遍历通过props属性传给goodsItem
3. 最后在子组件GoodListItem.vue中展示由父父组件Detail.vue传递过来的数据即可

注意：在组件中定义的props属性如果是使用驼峰命名法命名的，需要在dom标签中写成xxx-xxx的格式

比如：

• goodsItem -> goods-item
• detailGoodsList -> detail-goods-list

这就是Vue父组件向子组件传递数据的简单过程