【Vue】 (10) 组件-2

事件派发

html:

<em>原生的Dom事件在冒泡过程中第一次处理事件之后就会自动停止冒泡</em>
	<p>Vue自定义事件</p>
	<!-- 子组件模板 -->
	<template id="child-template">
		<input v-model="msg" />
		<button @click="method1">Dispatch Event</button>
	</template>
	
	
	<!-- 父组件模板 -->
	<div id="parent-template">
		<p>Messages:{{message | json}}</p>
		<child></child>
	</div>

js:

//注册子组件
Vue.component('child',{
	template:'#child-template',
	data:function(){
		return {msg:'hello'}
	},
	methods:{
		//1.执行这个方法
		method1:function(){
			//2.不空判断
			if(this.msg.trim()){
				//3.转发到child-msg这个事件（往上冒泡到parent找到）
				this.$dispatch('child-msg',this.msg);
				this.msg="";
			}
		}
	}
});

//启动父组件
var parent=new Vue({
	el:'#parent-template',
	data:{
		message:[]
	},
	//4这里是通过$on来绑定
	events:{
		//5.往上冒泡到parent找到事件处理
		'child-msg':function(msg){ 
			//处理事件
			this.message.push(msg);
		}
	}
})