非父子组件通信的方法

￡神魔★判官ぃ 2024-02-06 00:21 61阅读 0赞

**聚沙成塔·每天进步一点点**

#### 本文内容 ####

*  ⭐ 专栏简介
 *   *  1. 中央事件总线 (EventBus)
     *   *  发送事件的组件：
         *  接收事件的组件：
     *  2. Vuex 状态管理
     *   *  配置 Vuex：
         *  使用 Vuex 的组件：
     *  3. Provide / Inject
     *   *  祖先组件：
         *  后代组件：
     *  4. $attrs 和 $listeners
     *  5. 第三方状态管理库
 *  ⭐ 写在最后

## ⭐ 专栏简介 ##

**Vue学习之旅的奇妙世界** 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

![在这里插入图片描述][a5e6aa42c7844913a798169ab9707994.png_pic_center]

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

在Vue中，实现非父子组件通信有多种方法，根据项目的需求和复杂性，开发者可以选择适合的方式。以下是一些常用的非父子组件通信方法：

### 1. 中央事件总线 (EventBus) ###

中央事件总线是一个空的 Vue 实例，用作组件之间的通信中心。组件通过触发和监听事件来实现通信。

#### 发送事件的组件： ####

<template>
      <div>
        <button @click="sendMessage">Send Message</button>
      </div>
    </template>
    
    <script>
    import { EventBus } from './EventBus.js';
    
    export default {
      methods: {
        sendMessage() {
          EventBus.$emit('custom-event', 'Hello from sender!');
        },
      },
    };
    </script>

#### 接收事件的组件： ####

<template>
      <div>
        <p>{
       { receivedMessage }}</p>
      </div>
    </template>
    
    <script>
    import { EventBus } from './EventBus.js';
    
    export default {
      data() {
        return {
          receivedMessage: '',
        };
      },
      created() {
        EventBus.$on('custom-event', (message) => {
          this.receivedMessage = message;
        });
      },
    };
    </script>

### 2. Vuex 状态管理 ###

Vuex 是 Vue.js 应用程序开发的状态管理模式。它集中管理应用的状态，并提供了一种可预测的方式修改状态。

#### 配置 Vuex： ####

// store.js
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
        
      state: {
        
        message: '',
      },
      mutations: {
        
        setMessage(state, message) {
        
          state.message = message;
        },
      },
    });

#### 使用 Vuex 的组件： ####

<template>
      <div>
        <button @click="sendMessage">Send Message</button>
        <p>{
       { $store.state.message }}</p>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        sendMessage() {
          this.$store.commit('setMessage', 'Hello from sender!');
        },
      },
    };
    </script>

### 3. Provide / Inject ###

`provide` 和 `inject` 是 Vue 提供的一种高级选项，可以在祖先组件中使用 `provide` 提供数据，而在后代组件中使用 `inject` 来注入这些数据。

#### 祖先组件： ####

<template>
      <div>
        <child-component></child-component>
      </div>
    </template>
    
    <script>
    export default {
      provide() {
        return {
          message: 'Hello from provider!',
        };
      },
    };
    </script>

#### 后代组件： ####

<template>
      <div>
        <p>{
       { injectedMessage }}</p>
      </div>
    </template>
    
    <script>
    export default {
      inject: ['message'],
      computed: {
        injectedMessage() {
          return this.message;
        },
      },
    };
    </script>

### 4. $attrs 和 $listeners ###

每个组件实例都有 `$attrs` 和 `$listeners` 属性，可以用于在父组件中访问子组件的属性和监听事件。

<template>
      <div>
        
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        this.$emit('custom-event', 'Hello from child!');
      },
    };
    </script>

<template>
      <div>
        <child-component @custom-event="handleCustomEvent"></child-component>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleCustomEvent(message) {
          console.log(message);
        },
      },
    };
    </script>

### 5. 第三方状态管理库 ###

除了 Vuex 外，还可以使用其他的第三方状态管理库，例如 Redux 或 MobX。这些库提供了更多高级的状态管理和通信机制，适用于大型应用。

这些是一些用于非父子组件通信的常见方法。根据项目的具体情况，可以选择最合适的方式，以实现灵活而高效的组件通信。

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

## ⭐ 写在最后 ##

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，

[a5e6aa42c7844913a798169ab9707994.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d07817bacdf248a2a5d2b3edb46ea985.png