8-4-vue组件间通信

父子组件的通信（通讯） （组件的通信 是vue核心之一）  组件是vue的核心，组件的通信是vue的核心的核心。

通信：数据的“动态的实时的”传递。

通信（访问）--- 一定是  能 拿到 对方的 东西（数据中心的数据，方法中心的方法，计算属性等等）。

vue组件之间通信的8种方式

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

（1）$parent($root)和$children($refs和ref)

（2）props和$emit(常用)

（3）中央事件总线（非父子组件间通信）

（4）v-model

（5）provide和inject

（6）$attrs和$listeners

（7）vuex

（8）boradcast和dispatch(vue1.0中提供了这种方式，但vue2.0中没有)

一、$parent和$children ----------------------------------------------------------------------

二、props和$emit(常用) -----------------------------------------------------------------------

三、中央事件总线（非父子组件间通信） --------------------------------------------------------

非父子组件间通信

通过一个"空的vue实例"来进行值传递

组件1--- $emit()---空vue实例---$on---组件2

创建一个空实例(bus中央事件总线，或者叫中间组件)

利用$emit $on的触发和监听事件 实现非父子组件的通信

方法1：

在vue行挂载一个$bus作为中央处理组件

Vue.prototype.$bus = new Vue();

触发自定义事件传递数据

this.$bus.$emit('自定义事件名','传递的数据')

监听自定义事件获取数据

this.$bus.$on('自定义事件名',function(data){

//data接收的数据

})

----

方法2：

var bus = new Vue();

bus.$emit('自定义事件名','传递的数据')

bus.$on('自定义事件名',fn)

例如：

<div id="app">
<my-btn></my-btn>
<my-count></my-count>
</div>

<template id="mybtn">
<div>
<p>我是myBtn组件</p>
<p>
<button @click="addCount">点击，计算</button>
</p>
</div>
</template>

<template id="mycount">
<div>
<p>我是mycount组件</p>
<h1>{{number}}</h1>
</div>
</template>

<script src="js/vue.js"></script>
<script>
// 非父子组件通信
// 大前提：
// 空组件（空vue实例）----中间组件
let bus = new Vue();

// 组件A
let myBtn = {
data:function(){
return {
num:10
}
},
template:'#mybtn',
methods:{
addCount:function(){
bus.$emit('add',this.num);
}
}
}

// 组件B
let myCount = {
data:function(){
return {
number:0
}
},
template:'#mycount',
mounted:function(){
let _self = this;
bus.$on('add',function(data){
_self.number += data;
console.log(_self.number);
})
}
}

// 根实例 （根组件）
let vm = new Vue({
el:'#app',
data:{

},
components:{
myBtn,
myCount
}
})
</script>

预览效果，如下所示：