Vue组件通信：父传子、子传父、跨组件通信

方法一：组件通信_父传子_props（属性绑定）

在进行组件通信之前，我们首先要明确父和子是谁，父传子=>在父中引入子（被引入的是子）

1. 父传子，要先在子组件内定义props变量，准备接收，然后再使用变量

 2. 父组件内, 要展示封装的子组件：

先在

 子：MyProductSon.vue

 方法三：跨组件通信EventBus（兄弟组件通信）

 

需求：点击sonB按钮修改sonA中的值

实现步骤：

1.在src/EventBus/index.js 路径处– 创建空白Vue对象并导出

// 创建空白vue对象并导出 [作为事件总线]
import Vue from "vue";
export default new Vue();

2.在components文件夹中分别创建要跨组件通信的两个兄弟组件

 3.为兄弟组件设置相应的内容后确定传递数据与接收数据的组件

传递数据组件：sonB.vue          接收数据组件：sonA.vue

4.在App.vue文件中引入局部组件，完成创建并使用

5. 在要传递值的组件(sonB.vue)中引入事件总线EventBus，并通过EventBus.$emit('自定义事        件名',要传递的参数)将内容传到sonA.vue中

 6.在要接收值的组件(sonA.vue) 中引入事件总线EventBus并通过created中EventBus.$on('事件名', 函数体)完成内容修改