Vue组件通信

Vue 组件之间的通信，通常我们遇到的都是父子组件之间的通信

一、父子组件传参

1. 子组件定义 Props 属性；
2. 父组件再引用的子组件上绑定上相应的属性，子组件即可捕获父组件传递到自组件的值；

// 子组件（child.vue）
<template>
      <div>小灰的父亲让他去买 {{ product }} </div>
</template>
<script>
  export default {
      props: {
          product: {
             required: [true | false],
             type: [String | Number | Object | Boolean];
             default: [value | Function],
             validator: Function
          }
      }
  }
</script>

二、兄弟组件传参

方法一：EventBus

  // eventBus.js
  import Vue from 'vue';  
  export default new Vue();

方法二：Vue全局事件监听

// main.js 定义
Vue.prototype.$vm = new Vue();

// 组建中使用
this.vm.$emit(fun, data) // 事件触发
this.vm.$on(fun, (data) => {}) // 事件监听