vue自定义事件与组件传值

在vue中，除了click、mouseleave ...等原生事件，vue还支持自定义事件。

自定义事件应该分为三步：
1、声明自定义事件
2、监听自定义事件
3、触发自定义事件
在vue中，声明和监听自定义事件被合为一个步骤，即使用$on(eventName,callback)同时声明和监听；
触发事件则使用$emit(eventName[,...arg])，...arg是传递给监听回调callback的参数列表

组件传值分为三种：父子、子父以及兄弟
父子传值：父子传值较为容易，只需在父组件内为子组件标签添加属性，然后在子组件内通过props属性接收即可

Vue.component("Parent",{
	template: "
",
	components: {
		Child
	}
})
Vue.component("Child",{
	template: "
{{data}}
",
	props: ["data"]
})

//渲染Parent组件的HTML结果为 
//

//	

//		这是传递给子组件的值
//	
//
//注意，接收的属性命名必须和父组件传递过来的属性同名

子父传值：利用自定义事件来传值，在父组件内使用$on声明和监听自定义事件，在子组件内触发事件并传值

Vue.component("Parent",{
	template: "
",
	components: {
		Child
	},
	methods: {
		myEventHandler: function (data) {
			console.log(data)
		}
	}
})
Vue.component("Child",{
	template: "
",
	mounted: {
		this.$emit("myEvent","这是传递给父组件的数据")
	}
})
//渲染Parent，控制台会弹出：这是传递给父组件的数据

兄弟传值：利用eventBus实现，所谓eventBus，其实就是一个Vue实例对象，我们为这个对象添加自定义事件并在需要的时候触发这个实例上的自定义事件

var eventBus = new Vue()

Vue.component("Parent",{
	template: "
",
	components: {
		Child1,
		Child2
	},
	methods: {
		myEventHandler: function (data) {
			console.log(data)
		}
	}
})
Vue.component("Child1",{
	template: "
child1
",
	mounted: {
		eventBus.$on("brotherEvent",(data) => {
			//注意this绑定的上下文对象，这里使用了箭头函数
			cosnole.log(data);
		})
	}
})
Vue.component("Child2",{
	template: "
child2
",
	mounted: {
		eventBus.$emit("myEvent","这是 Child2 传递给Child1 的数据")
	}
})

//渲染Parent，控制台会弹出：这是 Child2 传递给Child1 的数据