Vue组件通讯

1.  自定义事件

Vue的子组件用$.emit()来触发事件，父组件用$.on()来监听子组件的的事件

<div id="app">
		<p>总数{{count}}</p>
		<my-component @jia='total' @jian='total'></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="myComponent">
		<div>
			<button @click="jiashu">+1</button>
			<button @click="jianshu">-1</button>
			<p>测试啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
		</div>
	</template>
	
	<script type="text/javascript">
		Vue.component('my-component',{
			template : '#myComponent',
			data: function(){
				return{
					newData: 0
				}
			},
			methods:{
				 jiashu:function(){
					this.newData++;
					this.$emit('jia',this.newData);
				},
				jianshu:function(){
					this.newData--;
					this.$emit('jian',this.newData);
				} 
			}
		
		});
		new Vue({
			el:"#app",
			data:{
				count:0
			},
			methods:{
				total:function(count){
					this.count = count;
				}
			}
		});
	</script>	

上面示例中，子组件有两个按钮，分别实现+1、-1的效果，在改变组件的data “count”，通过$.emit（）再把他们传递给父组件，父组件用v-on：jia，v-on:jian。$.emit()第一个参数是自定义的事件的名称，后面的参数都是要传递的数据。后边的参数可以是没有，可以是有多个。

2. 非父子组件之间通讯

在Vue.js. 2.x中，推荐使用一个空的Vue实例来作为中央事件总线，他就相当于一个中介。有一个组件把一个数据传递给这个空的Vue，然后谁需要(这里的谁指的是另外一个组件)这个数据，那么就管空的Vue要就好了。这两个组件没有任何联系。就好比租房者-中介-房东的关系。房东就相当于传数据的组件，空的Vue就相当于中介，需要数据的组件就相当于租房者。代码示例如下：

<div id="app">
		<p>{{message}}</p>
		<component-a>
		
		</component-a>
	</div>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="componentA">
		<div>
			<button @click="dianji">按钮</button>
		</div>
	</template>
	
	<script>
	
		var pub = new Vue();
		
		Vue.component('component-a',{
			template : '#componentA',
			methods:{
				dianji:function(){
					pub.$emit("on-message","传递的数据");
				}
			}
		});
		
		new Vue({
			el:'#app',
			data: {
				message:""
			},
			mounted:function(){
				var _this = this;
				pub.$on("on-message",function(msg){
					_this.message = msg;
				})
			}
		})
	
	</script>

这种方法巧妙的实现了组件之间的通讯，包括父子、兄弟、跨级，如果深入的使用，可以给pub扩展实例，给他添加data、method、computed等选项，这些都可以是共有的。在具体业务中，可以将经常需要共享一些通用的信息，比如用户登陆的具体信息。

。。。。除了这种方式，常见的方式还有父链、子组件索引