vue自定义事件与组件传值指南

Vue.component("Parent",{
	template: "<div className='parent'><child data='这是传递给子组件的信息' /></div>",
	components: {
		Child
	}
})
Vue.component("Child",{
	template: "<div className='child'>{{data}}</div>",
	props: ["data"]
})

//渲染Parent组件的HTML结果为 
//<div class="parent">
//	<div class="child">
//		这是传递给子组件的值
//	</div>
//</div>
//注意，接收的属性命名必须和父组件传递过来的属性同名

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

var eventBus = new Vue()

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

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