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

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

一、子组件在props中建立一个属性，用以接收父组件传过来的值
二、父组件中注册子组件
三、在子组件标签中添加子组件props中建立的属性
四、把须要传给子组件的值赋给该属性

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

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

3、非父子组件传递数据

一、新建一个eventBus.js文件，在里面新建一个vue实例，这个实例就承担起了组件之间通讯的桥梁了，也就是中央事件总线
二、而后给每一个子组件绑定一个方法(触发时候发布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()