VUE之组件（组件通信、单向数据流）

组件通信

我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。

组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。
本节主要介绍下常见父子通信的方法。

单向数据流

单向数据流是父子组件的核心概念，props是单向绑定的。
当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。
当父组件属性改变时，会传进子组件。而子组件的属性改变时，会报错。

这样的话可能觉得props有点鸡肋，只能初始化组件的时候用，在子组件内并不能进行操作。其实还是有两种办法去操作props的：
1.定义一个局部变量，并用props初始化它，以后操作这个局部变量。
2.定义一个计算属性，处理props的值并返回。

自定义事件

了解了组件对单向数据流，我们知道了组件从上至下是通过prop传递进行通信的。那从下往上怎么办呢？
vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时，定义事件，子组件通过触发这个事件来与父组件进行通信。

子组件→父组件
当子组件需要向父组件传递数据时，需要用到自定义事件。
Vue 组件有一套观察者模式，子组件用 $emit()来触发事件，父组件用$on()来监听子组件的事件。
语法结构：
父组件通过v-on:eventName="parentEventName"来设置监听
子组件通过$.emit(‘eventName’)来触发事件

案例1：
两种办法去操作props之一，定义一个局部变量，并用props初始化它，以后操作这个局部变量。即父组件传值→子组件保存初始值
父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。

<div class="demo">
			<p>总数：{{totalCount}}</p>
			<my-component 
			:count="totalCount"
			@add-parent-count="getTotalCount"
			></my-component>
		</div>
		<script type="text/javascript">
			Vue.component('my-component',{
				props:['count'],
				template:`
				<div>
				    子元素数据{{childCount}}
				   <button @click="addChildCount">+</button>
				</div>
				`,
				data:function(){
					return{
						childCount:this.count 
					}
				},
				methods:{
					addChildCount:function(){
						this.childCount+=1;
						this.$emit('add-parent-count',this.childCount)
					}
				}
			});
		    new Vue({
				el:".demo",
				data:{
					totalCount:6
				},
				methods:{
					getTotalCount:function(totalCount){
						this.totalCount = totalCount
					}
				}
			})
			
		</script>

数据解耦：子组件数据缓存已经完成，挂载完毕后便于父组件解耦。
此时父组件数据变化不再会影响传递到子组件。

案例2 点击按钮关闭

<div class="demo">
			<book
			:name="name"
			:description="description"
			:author="author"
			:status="status"
			@change-status="closeArea"
			>		
			</book>
		</div>
		
		
	<script type="text/javascript">
		Vue.component('book',{
			props:['name','description','author','status'],
			template:`
			<div class="book_area" v-show="childStatus">
			  {{name}}--{{description}}--{{author}}
			  <button @click='close'>&times;</button>
			</div>
			`,
			data:function(){
				return{
					childStatus:this.status
				}
			},
			methods:{
				clone:function(){
					this.childStatus = false;
					this.$emit('change-status',this.childStatus);
				}
			}
		});
		new Vue({
			el:'.demo',
			data:{
				name:'红楼梦',
				description:'又名《石头记》，从女娲炼石补天说起...',
				author:'曹雪芹',
				status:true
			},
			methods:{
				closeArea:function(){
					this.status = status;
				}
			}
		})
		
		
	</script>