Vue组件之间通信，父到子，子到父，非父子组件之间数据传递梳理

一、父组件=》子组件传递数据

1、子组件在props中创建一个属性，用以接收父组件传过来的值
2、父组件中注册子组件
3、在子组件标签中添加子组件props中创建的属性
4、把需要传给子组件的值赋给该属性

二、子组件=》父组件传递数据

*当子组件需要向父组件传递数据时，就要用到自定义事件。
1、子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2、将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

三、非父子组件传递数据

1、新建一个eventBus.js文件，在里面新建一个vue实例，这个实例就承担起了组件之间通信的桥梁了，也就是中央事件总线
2、然后给每个子组件绑定一个方法(触发时候发布eventBus),在每个子组件做一个订阅的监控,触发绑在created里的方法执行

在通信中，组件之间传值，他们都有一个共同点就是有中间介质，
*子向父的介质是自定义事件
*父向子的介质是props中的属性
*非父子组件的介质是中央事件总线
抓准这三点对于组件之间通信就好理解了

vue-cli创建的项目，附上精简的代码与图片：

HelloWorld.vue

<template>
  <div class="hello">
    <h1>hello标题</h1>
    <!-- // 在子组件标签child-aa上绑定myEvent对自定义事件的监听 -->
    <child-aa :myProp="toChildA" @myEvent="touchMe"></child-aa>
    <div>孩子，你贵姓：{{getByChildA}}</div>
    <child-bcd></child-bcd>
  </div>
</template>

<script>
import childAa from './childA'
import childBcd from './childBcd'
export default {
  name: 'HelloWorld',
  data () {
    return {
      toChildA: '给子组件childA传字符串内容', // 把需要传给子组件的值赋给该属性
      getByChildA: ''
    }
  },
  components: {
    childAa, // 父组件中注册子组件
    childBcd
  },
  methods: {
    touchMe(obj) { 
      this.getByChildA = obj.age
    }
  }
}
</script>

childA.vue

<template>
  <div class="childA">
    <h3>这里是childA</h3>
    <div>
      {{myProp}}
    </div>
    <button @click="doSomething">
      给父组件传个信息
    </button>
    <h3>兄弟组件传什么过来了：{{brotherInfo}}</h3>
  </div>
</template>

<script>
import $bus from '../untils/eventBus'
export default {
  name: 'childA',
  data () {
    return {
      brotherInfo: ''
    }
  },
  props: {
    myProp: {
      type: String // 子组件在props中创建一个属性，用以接收父组件传过来的值
    }
  },
  methods: {
    doSomething() { // 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
      this.$emit('myEvent', {age: 'lihongwei'}) // 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
    }
  },
  created() {
    $bus.$on('myEvent',(brotherInfo) => {
      this.brotherInfo = brotherInfo
    })
  }
}
</script>

<style scoped>
.childA{
  padding: 30px;
  border: 5px solid #ddd;
}
</style>

childBcd.vue

<template>
  <div class="childBcd">
    <h3>这里是childBcd</h3>
    <button @click="toBrother">
      给chidA传个信息
    </button>
  </div>
</template>

<script>
import $bus from '../untils/eventBus'
export default {
  name: 'childBcd',
  data () {
    return {
    }
  },
  methods: {
    toBrother() {
      $bus.$emit('myEvent', '兄弟,你好')
    }
  }
}
</script>

<style scoped>
.childBcd{
  padding: 30px;
  border: 5px solid #ddd;
}
</style>

eventBus.js

import Vue from 'vue'
export default new Vue()