vue父子组件以及非父子组件的通信

1.父组件传递数据给子组件

通过props传递数据

<template>
  <div>
    <h2>父组件</h2>
    {{ parentMsg }}
    <child-one :child-msg="parentMsg"></child-one> //这里必须要用 - 代替驼峰
  </div>
</template>

<script>
import ChildOne from '@/components/ChildOne.vue';  // @代表 src
export default {
  name: 'App',
  components: {
    ChildOne
  },
  data () {
    return {
      parentMsg: '我是来自父组件的消息'
    };
  }
};
</script>
<style>

</style>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    {{ childMsg }}
  </div>
</template>

<script>
export default {
  props: ['childMsg']
};
</script>

<style>

</style>

2.子组件传递数据给父组件

通过$emit传递父组件数据

<template>
  <div>
    <h2>父组件</h2>
    {{ parentMsg }}
    <child @childEvent="change"></child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue';
export default {
  name: 'App',
  components: {
    Child
  },
  data () {
    return {
      parentMsg: ''
    };
  },
  methods: {
    change(msg) {
      this.parentMsg = msg;
    }
  }
};
</script>

<style>

</style>

<template>
  <div>
    <h2>子组件</h2>
  </div>
</template>

<script>
export default {
  mounted () {
    this.$emit('childEvent','我是来自子组件的消息');
  }
};
</script>

<style>

</style>

子组件到父组件的通讯主要为父组件如何接受子组件之中的数据。这里的数据包括属性和方法（String,Number,Boolean,Object, Array ,Function）。

3.不同组件（非父子组件）之间的数据传递

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventbus来实现通信.
所谓eventbus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

<!-- App.vue-->
<template>
  <div id="app">
    <com-a></com-a>
    <com-b></com-b>
  </div>
</template>

<script>
import ComA from '@/components/coma';
import ComB from '@/components/comb';

export default {
  name: 'App',
  components: {
    ComA,
    ComB
  }
};
</script>

<style>

</style>

<!-- coma.vue-->
<template>
  <div>
    <h2>组件A</h2>
    <input @keyup="handleKeyup" v-model="num" type="text">
    {{ num }}
  </div>
</template>

<script>
import vueObj from '@/utils/communication';

export default {
  data() {
    return {
      num: 0
    };
  },
  methods: {
    handleKeyup() {
      // console.log(this.num);
      // 当num的值放生变化之后，通知comb组件
      vueObj.$emit('change', this.num);  // 触发事件
    }
  }
};
</script>

<style>

</style>

<!-- comb.vue-->
<template>
  <div>
    <h2>组件B</h2>  
    {{ n }}
  </div>
</template>

<script>
import vueObj from '@/utils/communication';

export default {
  data() {
    return {
      n: 0
    };
  },
  created() {
    vueObj.$on('change', (num) => {  // 监听事件
      this.n = num;
    });
  }
};
</script>

<style>

</style>

// 为了多个组件之间通信使用
import Vue from 'vue';
// eventbus
const vueObj = new Vue();

export default vueObj;