[Vue][自定义事件]关于组件prop双向绑定的理解和程序调试

父组件使用 prop 传递数据给子组件。子组件通过自定义事件与父组件通信。

自定义事件从子组件向父组件传递数据的步骤可大致归纳为：

1. 子组件模板中的原生事件（如click）绑定事件函数

2. 回调函数实现子组件内部数据的更新，同时触发自定义事件：$this.emit(//customEvent)

3. 父组件模板中v-on监听自定义事件

$emit+v-on偏向于事件函数的监听和触发，主要指向methods中的函数。

自定义事件的另一方面主要是针对prop自定义特性的双向绑定，偏向于纯数据的更新。采用以下方式：

父组件：

子组件：this.$emit('update:foo', newValue) //当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件

请看以下代码：

	
	
	
	


	

	    
	    
父组件{{name}}
	    
	

	
	

      

        而对于非表单，通常在子组件使用按钮触发子组件的事件，子组件函数中$emit触发父组件的自定义事件；对于表单,v-model是一个原生事件，默认实现表单控件元素上的双向数据绑定，无法改写加入自定义的语句，如果要加入$emit触发父组件的自定义事件,就要对v-model变通，把语法糖还原：
（1）v-bind:value="something"
（2）v-on:input="something = $event.target.value">
在第（2）条input监听事件中加入$emit，触发父组件的数据更新

	
	
	
	


	
update改变父组件状态
	

	    

	        
HTML表单
	        
{{name}}
	        
	    
	    

	    

	        
component组件的表单（update）：
	        
	        
	    
	

	
	

最后再强调程序调试中发现的两点：

1. @update:foo="val => bar = val"语句中，prop名foo既不能用驼峰命名，也不能用kebab-case模式命名；

2. 表单prop双向传递中，$emit触发的事件函数，传入的参数是$event.target.value而不是value