前端面试题精选 - 描述一下组件的通信方式

组件通信分为 2 种：父子组件之间的通信、非父子组件之间的通信；

父子组件通信：

父组件通过props向子组件传值，子组件通过$emit将数据发送给父组件；

非父子组件通信又分为：

兄弟组件、隔代关系组件等；

通信方式一：

通过eventBus（事件总线）实现跨组件传输，原理就是将它作为连接组件之间的桥梁，所有组件共用相同的事件中心，向事件中心发送或接收事件，并可以通知其他组件；

=> eventBus使用步骤：

1、初始化，创建一个事件总线并导出，以便其他模块可以使用并监听它；

// eventBus.js

import Vue from 'vue'
export const EventBus = new Vue() //通过一个空的Vue实例作为中央事件总线（事件中心）

2、导入eventBus，使用$emit发送数据；

3、导入$on，使用$on接收数据；

4、如果想移除事件，可以先导入eventBus，通过$off移除；（eventBus.$off ( 'add', {} )）

通信方式二：

ref 和 $refs;

如果 ref 在普通DOM上，那么它的引用指向的就是DOM元素；如果用到子组件上，那么它的引用就指向组件实例，可以通过实例直接调用组件上的方法和数据