Vue组件之间的通信方式(简单上手理解)

组件的存在,如同封装了一个函数,亦或创建了一个可以实现些许功能的包一样,都有复用,维护,以及避免了变量的污染等好处.

对于组件来说,封装了是一整套,包括html,css,js,实现的是一套完整的复用,为了方便修改组件的内容,但是又可以实现不一样的效果,则出现了Vue组件之间的通信,以下首先讲诉最普通的几种通信方式,先熟悉学习起来吧.

1.父组件 -----> 子组件  传值 

首先:判定清楚什么是父组件,什么是子组件?

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

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

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

先在

子：MyProductSon.vue

3.跨组件通信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('事件名', 函数体)完成内容修改

4.利用vuex 实现跨组件通信(包括兄弟通信以及无直接关系组件之间的通信)

此方式详情见下篇博客