组件之间的通信分为三种 父给子传 子给父传 兄弟组件之间的通信

1 父组件给子组件传值

子组件嵌套在父组件内部，父组件给子组件通报一个标识，在子组件内部用props吸收，子组件在模板里能够经由过程{{}}的情势举行运用。假如父组件给子组件通报的标识中含有—，子组件在吸收时采纳驼峰式吸收。

• 父组件挪用子组件的处所，
• 增添自定义属性，属性名随意定义（然则不要定义id,class等）
• 属性值为你须要通报的值（这个值能够是变量，假如是变量则运用绑定属性）
• 定义子组件的处所，
• 增添一个选项props，它是一个数组
• 数组中的元素就是父元素供应的属性名
• 那末，在子组件内部就能够直接运用父组件中定义的属性名，获得通报过来的属性值

2 子组件给父组件传值

• 子组件给父组件传值（相对于父给子传贫苦一点，就如我们常说的人往高处走，水往低处流嘛，假如要想水井内里的水抵达地面上来，最起码我们要有个管，这个管就是子组件给父组件传值的通道）
• 子组件中，定义好一个事宜标识，— to-parent（相当于定义好了通道）（注重不要驼峰式定名）
• 然后经由过程this.$emit(‘to-parent’, 通报的值)
• 父组件挪用子组件的处所，实行这个事宜，—–事宜标识 to-parent
• <v-son @to-parent=”getMoney”></v-son>
• 父组件完成要领getMoney，获得的值就是子组件通报给父组件的值

<template id=”son”>
<div>
我是孩子
<button @click=”giveMoney(10000)”>给父母打钱</button>
</div>
</template>
<template id=”test”>
<div>
<button @click=’count++’>点击次数{{count}}</button>,
这个月孩子打了{{money}}元钱
<v-son @to-parent=”getMoney”></v-son>
</div>
</template>

const Son = {
template: “#son”,
data () {
return {
}
},
methods: {
giveMoney (val) {
// 你办了卡，把卡给了父母，你打钱
this.$emit(‘to-parent’, val)
}
}
}
// 1、定义组件 —- 组件的首字母必需大写
const Test = {
template: “#test”,
data () {
return {
money: 0
}
},
methods:{
getMoney ( val ) {
this.money = val
}
},
components: {
‘v-son’: Son
}
}

3 非父子间的传值

非父子间的传值我个人以为算是组件传值中最贫苦的一个，你说它难她也难，说它简朴它也简朴，我们只需定义好一方担任监听一方担任触发即可，他们之间相互传值根据的是中心事宜总线，也就是new vue ,相当于飞机场中的塔台一样，都受它批示。

$on 担任监听事宜
$emit 担任触发事宜 并通报参数
    假如有AB两个组件，假如A要给B传值，B就必需先监听A，运用起来比较贫苦。
事宜的中心总线 （飞机塔台，邮差的故事）
在src下建立bus.js
var bus = new Vue() //中心事宜总线
export default bus ；
假如有AB两个组件
在AB组件中引入bus中心事宜总线

在A组件中发送一个信息给B组件

methods:{
    sendData(val){
   bus.$emit("A-B",val)
    }
  }
mounted（）{
    bus.$on("B-A",function(val){
        console.log（val）
})
}
在B组件内吸收
mounted（）{
    bus.$on("A-B",function(val){
        console.log（val）
          bus.$emit("B-A",val)
})
}

假如AB组件有两次交互，就会有四次事宜，假如做三次事宜就会有六次事宜
实在最贫苦的不是他们之间的传值，而是定义他们之间的事宜称号，假如没有一套完整定义事宜称号的划定规矩，会无故的增添项目开辟的周期，降低了开辟效力，代码的耦合度会增添，保护性也低了。
所以不发起运用

能够在main.js中
vue.prototype.$bus = new Vue()在原型上扩大一个$bus
不必单建立bus文件
经由过程this.$bus.$on()举行运用