vue父子组件通信（单向、反向）

1.父组件向子组件传递信息（单向、一对一）【通过props】
2.多个父组件引用同一个子组件（单向、多对一）【通过props】
3.子组件向父组件传递信息（反向、一对一）【通过子组件利用$emit触发事件，并传入新值给父组件】

1.父组件向子组件传递信息（单向、一对一）【通过props】

1. 创建父组件和子组件，不多说；
2. 在父组件里引入子组件，注册子组件，使用子组件

<template>
	<div class="ParentComp">
		<h1>{{ msg }}</h1>
		<ChildComp></ChildComp>   //3.使用子组件
	</div>
</template>

<script>
	import ChildComp from '@/components/ChildComp'   //1.引入子组件
	export default {
		name: 'ParentComp',
		components: {ChildComp:ChildComp},   //2.注册子组件
		data () {
			return {
				msg: '我是父组件'
			}
		}
	}
</script>

3.先看父组件里面的代码，如下：

<template>
	<div class="ParentComp">
		<h1 @click="changeMsg">{{ msg }}</h1>  // 3.给父组件的某个元素绑定事件
		<ChildComp :infoFromParent="info"></ChildComp>  // 4.给 被引用的子组件 绑定一个变量，变量的值即为父组件要改变的值
	</div>
</template>

<script>
	import ChildComp from '@/components/ChildComp'
	export default {
		name: 'ParentComp',
		components: {ChildComp:ChildComp},
		data () {
			return {
				msg: '我是父组件',
				info: '我是来自父组件的信息'  // 1.声明一个将要被父组件改变的变量
			}
		},
		methods: {
			changeMsg(){   // 2.写一个改变变量的方法
				this.info = "父组件改变了信息"
			}
		}
	}
</script>

4.再看子组件里的代码

<template>
  <div class="ChildComp">
	<h3>{{ msg }}</h3>
	<div>{{infoFromParent}}</div>   // 2.使用变量即可
  </div>
</template>

<script>
	export default {
	  name: 'ChildComp',
	  props:['infoFromParent'],   // 1.重点来了：通过props建立与父组件之间的联系，其中'infoFromParentOne' 是父组件里为子组件绑定的变量
	  data () {
		return {
		  msg: '我是子组件'
		}
	  }
	}
</script>

至此，父组件效果图应该是这样的，下图 子组件源没有任何变化，只是被引用的子组件发生变化

5.点一下 “我是父组件” 这行文字试试吧，效果如下

这样，子组件就顺利接收到了父组件的信息，实现父子组件单向通信

2.多个父组件引用同一个子组件（单向、多对一）【通过props】

这个原理和 一对一 是一样的，唯一不同之处就是在 子组件源 里建立多个与父组件的联系，分别对应相关的父组件（以下是子组件代码）：

<template>
  <div class="ChildComp">
	<h3>{{ msg }}</h3>
	<div>{{infoFromParentOne}} {{infoFromParentTwo}}</div>  // 2.使用变量
  </div>
</template>

<script>
	export default {
	  name: 'ChildComp',
	  props:['infoFromParentOne','infoFromParentTwo'],   // 1.建立多个与不同父组件的联系
	  data () {
		return {
		  msg: '我是子组件'
		}
	  }
	}
</script>

代码里使用变量时，虽然把两个变量写在一起了，但是显示效果只会根据引用关系一一对应，如下图：



所以，了解 一对一 之后，多对一 就很容易理解。

3.子组件向父组件传递信息（反向、一对一）【通过子组件利用$emit触发事件，并传入新值给父组件】

大致流程是这样的：子组件执行事件的同时，利用 $emit 触发 “被父组件监听的事件” ，父组件监听到之后，再去执行某个事件 接收由子组件传递过来的信息。

1.看父组件代码：

<template>
	<div class="ParentCompOne">
		<h1 @click="changeMsg">{{ msg }}</h1>
		<ChildComp @childEven="showInfoFromChild"></ChildComp>  // 2.给子组件绑定这个事件
	</div>
</template>

<script>
	import ChildComp from '@/components/ChildComp'
	export default {
		name: 'ParentCompOne',
		components: {ChildComp:ChildComp},
		data () {
			return {
				msg: '我是父组件',
			}
		},
		methods: {
			showInfoFromChild(childInfo){   // 1.写一个方法，接受一个参数
				alert(childInfo);
			}
		}
	}
</script>

注释1：(参数形式可以是单个的值，也可以是数组)，这个参数的值即为子组件传递过来的值，这里参数用childInfo代替

注释2：“@childEven”的作用是让父组件监听“childEven”是否被触发，如果被触发了，就执行“showInfoFromChild”事件，那么在哪里触发呢？当然是在子组件里面。

2.看子组件代码：

<template>
  <div class="ChildComp">
	<h3>{{ msg }}</h3>
	<button @click="transInfoToParent">点我给父组件传递信息</button>  // 2.给子组件的元素绑定此事件
  </div>
</template>

<script>
	export default {
	  name: 'ChildComp',
	  data () {
		return {
		  msg: '我是子组件',
		  childInfo:'我是来自子组件的信息，由于子组件触发了事件，所以才能把我传递给父组件'
		}
	  },
	  methods: {
		transInfoToParent(){    // 1.子组件里写了个方法
			this.$emit("childEven", this.childInfo);
		}
	  }
	}
</script>

注释1：利用$emit去触发"childEven"，让父组件能够监听到"childEven"被触发了，注意：子组件的“childEven”和父组件的“childEven”名称一定要保持一致，如果是驼峰都要驼峰，如果是中横线都要中横线。 $emit方法后面跟的值“this.childInfo”即为要传给父组件的值。父组件通过方法里的参数接收值。

注释2：子组件绑定方法后，执行transInfoToParent方法的同时，也就触发了被监听的“childEven”，继而给父组件传值。

3.至此，代码完成，看一下效果：