Vue--组件之间的通信

深碍√TFBOYSˉ_ 2024-03-17 22:42 72阅读 0赞

### 1.什么是组件通信？ ###

组件通信，就是指**组件与组件**之间的**数据传递**

*  组件的数据是独立的，无法直接访问其他组件的数据。
 *  想使用其他组件的数据，就需要组件通信

### 2.组件关系分类 ###

1.  父子关系
2.  非父子关系

![088aa3a2b372c06cd602d23e75d47e63.png][]

### 3.通信解决方案 ###

组件之间的通信基于上述关系分为两大类。

![(img-UpR68LNa-1689782448053)][img-UpR68LNa-1689782448053]

### 4.父子通信流程 ###

1.  父组件通过 **props** 将数据传递给子组件
2.  子组件利用 **$emit** 通知父组件修改更新

![(img-IzcnNykq-1689782448054)][img-IzcnNykq-1689782448054]

#### 4.1.父向子通信代码示例 ####

父组件通过**props**将数据传递给子组件

父组件`App.vue`

<template>
      <div class="app" style="border: 3px solid #000; margin: 10px">
        我是APP组件 
        <Son></Son>
      </div>
    </template>
    
    <script>
    import Son from './components/Son.vue'
    export default {
      name: 'App',
      data() {
        return {
          myTitle: 'Vue',
        }
      },
      components: {
        Son,
      },
    }
    </script>
    
    <style>
    </style>

子组件`Son.vue`

<template>
      <div class="son" style="border:3px solid #000;margin:10px">
        我是Son组件
      </div>
    </template>
    
    <script>
    export default {
      name: 'Son-Child',
    }
    </script>
    
    <style>
    
    </style>

![(img-SNR36vGo-1689782448054)][img-SNR36vGo-1689782448054]

![(img-e4prJAdO-1689782448055)][img-e4prJAdO-1689782448055]

父向子传值步骤

1.  给子组件以添加属性的方式传值
2.  子组件内部通过props接收
3.  模板中直接使用 props接收的值

#### 4.2.子向父通信代码示例 ####

子组件利用 **$emit** 通知父组件，进行修改更新

![(img-iithR0Sl-1689782448055)][img-iithR0Sl-1689782448055]

![(img-Jj8enSzX-1689782448056)][img-Jj8enSzX-1689782448056]

子向父传值步骤

1.  $emit触发事件，给父组件发送消息通知
2.  父组件监听$emit触发的事件
3.  提供处理函数，在函数的性参中获取传过来的参数

### 5.非父子通信 ###

#### 5.1. 非父子通信-event bus 事件总线 ####

**1.作用**

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

**2.步骤**

1.  创建一个都能访问的事件总线 （空Vue实例）
    
        import Vue from 'vue'
        const Bus = new Vue()
        export default Bus
2.  A组件（接受方），监听Bus的 $on事件
    
        import Bus from 'Bus'
        
        created () {
              
          Bus.$on('sendMsg', (msg) => {
              
            this.msg = msg
          })
        }
    
    B组件（发送方），触发Bus的$emit事件
    
        Bus.$emit('sendMsg', '这是一个消息')
    
    ![(img-gufRaDYw-1689782448056)][img-gufRaDYw-1689782448056]

**3.代码示例**

EventBus.js

import Vue from 'vue'
    const Bus  =  new Vue()
    export default Bus

BaseA.vue(接受方)

<template>
      <div class="base-a">
        我是A组件（接收方）
        <p>{
       {msg}}</p>  
      </div>
    </template>
    
    <script>
    import Bus from '../utils/EventBus'
    export default {
      data() {
        return {
          msg: '',
        }
      },
    }
    </script>
    
    <style scoped>
    .base-a {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      border-radius: 3px;
      margin: 10px;
    }
    </style>

BaseB.vue(发送方)

<template>
      <div class="base-b">
        <div>我是B组件（发布方）</div>
        <button>发送消息</button>
      </div>
    </template>
    
    <script>
    import Bus from '../utils/EventBus'
    export default {
    }
    </script>
    
    <style scoped>
    .base-b {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      border-radius: 3px;
      margin: 10px;
    }
    </style>

App.vue

<template>
      <div class="app">
        <BaseA></BaseA>
        <BaseB></BaseB> 
      </div>
    </template>
    
    <script>
    import BaseA from './components/BaseA.vue'
    import BaseB from './components/BaseB.vue' 
    export default {
      components:{
        BaseA,
        BaseB
      }
    }
    </script>
    
    <style>
    
    </style>

#### 5.2. 非父子通信-provide&inject ####

**1.作用**

跨层级共享数据

**2.场景**

![(img-4VW3PcSd-1689782448057)][img-4VW3PcSd-1689782448057]

3.**语法**

1.  父组件 provide提供数据

export default {
        
      provide () {
        
        return {
        
           // 普通类型【非响应式】
           color: this.color, 
           // 复杂类型【响应式】
           userInfo: this.userInfo, 
        }
      },
     data() {
        
        return {
        
             color: 'pink',
             userInfo: {
        
                name: 'zs',
                ags: 18
             }
          }
      }
    }

2.子/孙组件 inject获取数据

export default {
        
      inject: ['color','userInfo'],
      created () {
        
        console.log(this.color, this.userInfo)
      }
    }

4.**注意**

*  provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
 *  子/孙组件通过inject获取的数据，不能在自身组件内修改

> 总结

}
      }

\}  
\}

2.子/孙组件 inject获取数据
    
    ```js
    export default {
      inject: ['color','userInfo'],
      created () {
        console.log(this.color, this.userInfo)
      }
    }

4.**注意**

> 总结

非父子通信的核心思路是创建一个共享数据容器，包括两大类。event bus事件总线通过接收方监听Bus的 `on`事件以及发送方触发Bus的`$emit`事件完成通信；provide&inject 直接在父组件中`provide`提供数据，子/孙组件 `inject`获取数据实现通信。其中，provide提供`普通数据类型`为非响应式，父组件数据修改后子/孙组件 `inject`获取的数据不变，而`复杂类型改变`。

### 5.Vuex ###

[Vue–Vuex][Vue_Vuex]

[088aa3a2b372c06cd602d23e75d47e63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/117c14d3e94a48b397202f185af511b2.png
[img-UpR68LNa-1689782448053]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/fae57c471fe241e58a39ce32c7f79c10.png
[img-IzcnNykq-1689782448054]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/56a15dc0a59f4a008d06b4612c906cea.png
[img-SNR36vGo-1689782448054]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/801cf09fa9fe4acab437ef0e724a6b0c.png
[img-e4prJAdO-1689782448055]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/dd7320ae524b44358a1d422083cef45b.png
[img-iithR0Sl-1689782448055]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/75790f5ac09e4a488a5fd30472af955b.png
[img-Jj8enSzX-1689782448056]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/09d79f3ec4a844d69eca387f5fb29fa7.png
[img-gufRaDYw-1689782448056]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a7d29a0d5c9e4c21b8f58f960f0ce920.png
[img-4VW3PcSd-1689782448057]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5832d725e91d45f8b709423acd5a2410.png
[Vue_Vuex]: https://blog.csdn.net/qq_62254095/article/details/131949302