父子组件间的传值

父子组件间传值

父→子： 父组件绑定数据，子组件接收数据

父组件：
	data() {return{ Data:'父组件'} }
	<ChildComponent :ParentData="Data"></ChildComponent>
子组件：
	props:{ParentData}

子→父： 子组件以emit方法发布事件，父组件设置自定义事件监听。它还以一种更简单的方式发出事件。

<button @click="$emit('handleClick')">点击计数</button>

Child:
handleClick () { 
  this.$emit('ChildEvent',可选参数（子组件内数据）)
}
Parent:
<ChildComponent @ChildEvent="handleClick(可选参数)"></ChildComponent>

VUE单向流数据

简述：父子组件传值，子组件只可以接收来自父组件的数据而不能修改父组件的数据，否则其他子组件引用相同父组件数据时会产生BUG。
Q ： 子组件想要修改接收的父组件数据怎么办？
A ： 在子组件data里拷贝一下数据，再修改拷贝的数据即可

 data () { // data: function () 
	return {
	   拷贝属性名: this.父组件传递的数据属性名 
	         // props内数据要用this指向
	    }

子组件标签内绑定原生事件

问题： 父组件中引用子组件，在子组件标签内添加的的监听事件都默认是自定义事件（监听emit事件）
解决方法： 在监听事件后加上修饰符.native即可绑定原生事件

<ChildComponent @click.native="handleclick"></ChildComponent>