非父子组件通信-$on和$emit

非父子组件通信：通过 event bus ，在一个组件创建时的钩子函数中监听 某个事件，而在需要与其进行通信的组件中触发这个函数，同时交换数据

HTML：

<div id="app">
	<foo></foo><br />
	<bar></bar>
</div>

JS：

（1）创建一个中转站，空的vue实例

var eventBus = new Vue({});

（2）//创建一个组件foo：去监听bar组件触发的函数，同时自己去触发bar组件的事件

var foo = {
	template:"<div>"+
		"<p>foo的数量：{{fooNum}}</p>"+
		"<button @click="addBar">增加bar的数量</button>"+
		"</div>",
	data:function(){
		return {
			fooNum:0
		}
	},
	//mounted是钩子函数，它是完成了挂载，使用created钩子函数是仅仅data数据初始化完成
	mounted:function(){
		var _this = this;
		eventBus.$on("foo",function(num){
			_this.fooNum+=num;
		})
	},
	methods:{
		addBar:function(){
			eventBus.$emit("bar",3);
		}
	}
}

（3）创建组件bar，与foo组件正好相反

var bar = {
	template:"<div>"+
		"<p>bar数量：{{barNum}}</p>"+
		"<button @click="addFoo">增加foo数量</button>"+
		"</div>",
	data:function(){
		return {
			barNum:0
		}
	},
	mounted:function(){
		var _this = this;
		eventBus.$on("bar",function(num){
			_this.barNum+=num;
		})
	},
	methods:{
		addFoo:function(){
			eventBus.$emit("foo",2);
		}
	}
}	

（4）最后，创建Vue实例，把组件放到局部components，完成局部注册

var vm = new Vue({
	el:"#app",
	components:{
		foo,
		bar
	}
})

阅读更多