字节一面：Vue组件之间的通信方式都有哪些？

末蓝、 2024-04-17 10:27 72阅读 0赞

![a90d604fac5e42b394b6452c426b9890.png][]

**前言**

> 最近博主在**字节面试**中遇到这样一个面试题，这个问题也是前端面试的高频问题，vue是前端领域使用者最多的框架，作为一名前端开发工程师深入了解它的生命周期是非常有必要的，博主在这给大家细细道来。

--------------------

> ? 作者简介：[程序员小豪][Link 1]，全栈工程师，热爱编程，曾就职于**蔚来、腾讯**，现就职于某互联网大厂，技术栈：Vue、React、Python、Java  
> ? 本文收录于小豪的[前端][Link 2]系列专栏，后续还会更新**前端入门以及前端面试**的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个[前端][Link 2]专栏会对你有所帮助，欢迎关注起来呀  
> ? 本人也会持续的去关注`AIGC以及人工智能领域`的一些动向并总结到博客中，大家感兴趣的可以关注一下我的[人工智能][Link 3]专栏  
> ? [云原生][Link 4]的入门学习系列，大家有兴趣的可以看一看

#### 目录 ####

*  一、组件间通信的概念
 *  二、组件间通信解决了什么
 *   *  组件间通信的分类
 *  三、组件间通信的方案
 *   *  props传递数据
     *  $emit 触发自定义事件
     *  ref
     *  EventBus
     *   p a r e n t 或 parent 或 parent或 root
     *   a t t r s 与 attrs 与 attrs与 listeners
     *  provide 与 inject
     *  vuex
     *  小结
 *  总结

![7d905c3a1b9a4d9a97124475ec5cf226.png][]

## 一、组件间通信的概念 ##

开始之前，我们把**组件间通信**这个词进行拆分

*  组件
 *  通信

都知道组件是`vue`最强大的功能之一，`vue`中每一个`.vue`我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信**组件间通信**即指组件(`.vue`)通过某种方式来传递信息以达到某个目的举个栗子我们在使用`UI`框架中的`table`组件，可能会往`table`组件中传入某些数据，这个本质就形成了组件之间的通信

## 二、组件间通信解决了什么 ##

在古代，人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递，到了今天，随着科技水平的飞速发展，通信基本完全利用有线或无线电完成，相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话，我们可以看到通信的本质是信息同步，共享回到`vue`中，每个组件之间的都有独自的作用域，组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统

### 组件间通信的分类 ###

组件间通信的分类可以分成以下

*  父子组件之间的通信
 *  兄弟组件之间的通信
 *  祖孙与后代组件之间的通信
 *  非关系组件间之间的通信

关系图:

![27c7bd50b00a434c8f827dc4c8b03881.png][]

## 三、组件间通信的方案 ##

整理`vue`中8种常规的通信方案

1.  通过 props 传递
2.  通过 $emit 触发自定义事件
3.  使用 ref
4.  EventBus
5.   p a r e n t 或 parent 或 parent或root
6.  attrs 与 listeners
7.  Provide 与 Inject
8.  Vuex

### props传递数据 ###

![fb22c0ad6c9f43949b20a49ab62c8743.png][]

*  适用场景：父组件传递数据给子组件
 *  子组件设置`props`属性，定义接收父组件传递过来的参数
 *  父组件在使用子组件标签中通过字面量来传递值

`Children.vue`

props:{
          
        // 字符串形式  
     name:String // 接收的类型参数  
        // 对象形式  
        age:{
            
            type:Number, // 接收的类型为数值  
            defaule:18,  // 默认值为18  
           require:true // age属性必须传递  
        }  
    }

`Father.vue`组件

### $emit 触发自定义事件 ###

*  适用场景：子组件传递数据给父组件
 *  子组件通过`$emit触发`自定义事件，`$emit`第二个参数为传递的数值
 *  父组件绑定监听器获取到子组件传递过来的参数

`Chilfen.vue`

this.$emit('add', good)

`Father.vue`

### ref ###

*  父组件在使用子组件的时候设置`ref`
 *  父组件通过设置子组件`ref`来获取数据

父组件

<Children ref="foo" />  
    
    this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

### EventBus ###

*  使用场景：兄弟组件传值
 *  创建一个中央事件总线`EventBus`
 *  兄弟组件通过`$emit`触发自定义事件，`$emit`第二个参数为传递的数值
 *  另一个兄弟组件通过`$on`监听自定义事件

Bus.js
    // 创建一个中央时间总线类  
    class Bus {
          
      constructor() {
          
        this.callbacks = {
        };   // 存放事件的名字  
      }  
      $on(name, fn) {
          
        this.callbacks[name] = this.callbacks[name] || [];  
        this.callbacks[name].push(fn);  
      }  
      $emit(name, args) {
          
        if (this.callbacks[name]) {
          
          this.callbacks[name].forEach((cb) => cb(args));  
        }  
      }  
    }  
      
    // main.js  
    Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
    // 另一种方式  
    Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

`Children1.vue`

this.$bus.$emit('foo')

`Children2.vue`

this.$bus.$on('foo', this.handle)

###  p a r e n t 或 parent 或 parent或 root ###

*  通过共同祖辈`$parent`或者`$root`搭建通信桥连

兄弟组件

this.$parent.on('add',this.add)

另一个兄弟组件

this.$parent.emit('add')

###  a t t r s 与 attrs 与 attrs与 listeners ###

*  适用场景：祖先传递数据给子孙
 *  设置批量向下传属性`$attrs`和 `$listeners`
 *  包含了父级作用域中不作为 `prop` 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
 *  可以通过 `v-bind="$attrs"` 传⼊内部组件

// child：并未在props中声明foo  
    <p>{
        {
        $attrs.foo}}</p>  
      
    // parent  
    <HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue  
    <Child2 msg="lalala" @some-event="onSomeEvent"></Child2>  
      
    // Child2做展开  
    <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  
      
    // Grandson使⽤  
    <div @click="$emit('some-event', 'msg from grandson')">  
    {
        {
        msg}}  
    </div>

### provide 与 inject ###

*  在祖先组件定义`provide`属性，返回传递的值
 *  在后代组件通过`inject`接收组件传递过来的值

祖先组件

provide(){
          
        return {
          
            foo:'foo'  
        }  
    }

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

### vuex ###

*  适用场景: 复杂关系的组件数据传递
 *  `Vuex`作用相当于一个用来存储共享变量的容器

![0d777eb37dd94591a672ae6e8b50388f.png][] \- \`state\`用来存放共享变量的地方 - \`getter\`，可以增加一个\`getter\`派生状态，(相当于\`store\`中的计算属性），用来获得共享变量的值 - \`mutations\`用来存放修改\`state\`的方法。 - \`actions\`也是用来存放修改state的方法，不过\`action\`是在\`mutations\`的基础上进行。常用来做一些异步操作

### 小结 ###

*  父子关系的组件数据传递选择 `props` 与 `$emit`进行传递，也可选择`ref`
 *  兄弟关系的组件数据传递可选择`$bus`，其次可以选择`$parent`进行传递
 *  祖先与后代组件数据传递可选择`attrs`与`listeners`或者 `Provide`与 `Inject`
 *  复杂关系的组件数据传递可以通过`vuex`存放共享的变量

## 总结 ##

各位看官老爷们好，小豪已经建立了技术交流群，如果你很感兴趣，可以私信我加入我的社群。

?社群中不定时会有很多活动，例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。

?本人目前是在互联网大厂正式工作，也有过多个大厂的工作经历，加入社群也会有简历修改辅导，模拟面试，手把手项目实战教学，大厂工作内推机会以及大厂面试题解析分享等福利。

?社群方向很多，相关领域有Web全栈（前后端）、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。

?不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个技术大佬！也随时欢迎您跟我沟通，一起交流，一起成长。变现、进步、技术、资料、项目、你想要的这里都会有

?网络的风口只会越来越大，风浪越大，鱼越贵！欢迎您加入社群~一个人可以或许可以走的很快，但一群人将走的更远！

?想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您扫描下方二维码直接加入到我的交流社群！(微信：adcoderhao)

[a90d604fac5e42b394b6452c426b9890.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/d5058525b3fa414fa7110fe7643ebbab.png
[Link 1]: https://blog.csdn.net/A_D_H_E_R_E
[Link 2]: https://blog.csdn.net/a_d_h_e_r_e/category_12357719.html
[Link 3]: https://blog.csdn.net/a_d_h_e_r_e/category_12402347.html
[Link 4]: https://blog.csdn.net/a_d_h_e_r_e/category_12369482.html
[7d905c3a1b9a4d9a97124475ec5cf226.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/ec40e59631624c85b0174e1172a5e513.png
[27c7bd50b00a434c8f827dc4c8b03881.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/1da37084fb8f4a1c87c87b48cb49d47a.png
[fb22c0ad6c9f43949b20a49ab62c8743.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/908d67836e824be88e537cd30f8f74cf.png
[0d777eb37dd94591a672ae6e8b50388f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/4ea40b1c51f34ec0b43b73c17270ea25.png