你不知道得Vue组件通信的六种方式，详解解析！！！

àì夳堔傛蜴生んèń 2023-09-25 18:46 40阅读 0赞

Vue是一款流行的前端框架，它提供了多种方式来实现组件之间的通信。在这篇博客中，我们将介绍六种Vue组件通信的方式，并提供相应的代码示例。

### 1. Props / $emit ###

这是Vue中最常用的一种组件通信方式。父组件通过props向子组件传递数据，子组件通过$emit事件向父组件发送消息。以下是一个简单的示例：

<template>
      <div>
        <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
      </div>
    </template>
    <script>
    import ChildComponent from './ChildComponent.vue'
    export default {
        
      components: {
         ChildComponent },
      data() {
        
        return {
        
          parentMessage: 'Hello from parent'
        }
      },
      methods: {
        
        handleChildEvent(message) {
        
          console.log(message)
        }
      }
    }
    </script>
    
    
    <template>
      <div>
        <button @click="sendMessage">Send Message</button>
      </div>
    </template>
    <script>
    export default {
        
      props: ['message'],
      methods: {
        
        sendMessage() {
        
          this.$emit('childEvent', 'Hello from child')
        }
      }
    }
    </script>

在这个示例中，父组件通过props向子组件传递了一个名为message的属性。子组件通过$emit事件向父组件发送了一个名为childEvent的事件。

### 2. $parent / $children ###

使用 $parent 和 $children 属性可以访问组件树中的其他组件。但这种方式并不推荐，因为它会使组件之间的耦合度太高。

以下是一个示例：

<template>
      <div>
        <child-component></child-component>
      </div>
    </template>
    <script>
    import ChildComponent from './ChildComponent.vue'
    export default {
        
      components: {
         ChildComponent },
      methods: {
        
        sendMessage() {
        
          this.$children[0].handleMessage('Hello from parent')
        }
      }
    }
    </script>
    
    
    <template>
      <div>
        <h1>{
        {
         message }}</h1>
      </div>
    </template>
    <script>
    export default {
        
      data() {
        
        return {
        
          message: 'Hello from child'
        }
      },
      methods: {
        
        handleMessage(message) {
        
          this.message = message
        }
      }
    }
    </script>

在这个示例中，父组件使用了$children属性来访问子组件，并调用了子组件的handleMessage方法。

### 3. Event Bus ###

使用事件总线（Event Bus）可以在组件之间进行解耦的通信。在主Vue实例中创建一个事件总线，然后在需要通信的组件中使用 e m i t 来发送事件，再使用 emit来发送事件，再使用 emit来发送事件，再使用on来监听事件。以下是一个示例：

import Vue from 'vue'
    export const EventBus = new Vue()
    
    
    <template>
      <div>
        <button @click="sendMessage">Send Message</button>
      </div>
    </template>
    <script>
    import {
         EventBus } from './EventBus.js'
    export default {
        
      methods: {
        
        sendMessage() {
        
          EventBus.$emit('parentEvent', 'Hello from parent')
        }
      }
    }
    </script>
    
    
    <template>
      <div>
        <h1>{
        {
         message }}</h1>
      </div>
    </template>
    <script>
    import {
         EventBus } from './EventBus.js'
    export default {
        
      data() {
        
        return {
        
          message: 'Hello from child'
        }
      },
      mounted() {
        
        EventBus.$on('parentEvent', (message) => {
        
          this.message = message
        })
      }
    }
    </script>

在这个示例中，我们创建了一个名为EventBus的事件总线。父组件通过EventBus. e m i t 方法向事件总线发送了一个名为 p a r e n t E v e n t 的事件。子组件通过 E v e n t B u s . emit方法向事件总线发送了一个名为parentEvent的事件。子组件通过EventBus. emit方法向事件总线发送了一个名为parentEvent的事件。子组件通过EventBus.on方法在事件总线上监听parentEvent事件。

### 4. Provide / Inject ###

使用Provide / Inject可以在组件树中进行依赖注入。父组件通过provide提供数据，然后子组件通过inject来注入数据。以下是一个示例：

<template>
      <div>
        <child-component></child-component>
      </div>
    </template>
    <script>
    export default {
        
      provide: {
        
        message: 'Hello from parent'
      }
    }
    </script>
    
    
    <template>
      <div>
        <h1>{
        {
         message }}</h1>
      </div>
    </template>
    <script>
    export default {
        
      inject: ['message']
    }
    </script>

在这个示例中，我们在父组件中使用provide来提供一个名为message的属性。子组件通过inject来注入message属性。

### 5. Vuex ###

Vuex是Vue的状态管理库，可以方便地实现组件之间的通信。在Vuex中，我们可以定义一个全局的状态，并在需要通信的组件中使用mapState、mapGetters、mapMutations和mapActions等方法来访问这些状态。以下是一个示例：

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export default new Vuex.Store({
        
      state: {
        
        message: 'Hello from Vuex'
      },
      mutations: {
        
        updateMessage(state, message) {
        
          state.message = message
        }
      }
    })
    
    
    <template>
      <div>
        <child-component></child-component>
      </div>
    </template>
    <script>
    import {
         mapState } from 'vuex'
    export default {
        
      computed: mapState(['message'])
    }
    </script>
    
    
    <template>
      <div>
        <button @click="updateMessage">Update Message</button>
      </div>
    </template>
    <script>
    import {
         mapMutations } from 'vuex'
    export default {
        
      methods: mapMutations(['updateMessage'])
    }
    </script>

在这个示例中，我们定义了一个名为message的全局状态，并在父组件中使用mapState来访问这个状态。子组件中使用了mapMutations来调用updateMessage方法来更新message状态。

### 6. $refs ###

最后一种Vue组件通信的方式是使用 r e f s 属性。可以在父组件中通过 refs属性。可以在父组件中通过 refs属性。可以在父组件中通过refs属性来访问子组件中的方法和属性。以下是一个示例：

<template>
      <div>
        <child-component ref="child"></child-component>
        <button @click="sendMessage">Send Message</button>
      </div>
    </template>
    <script>
    export default {
        
      methods: {
        
        sendMessage() {
        
          this.$refs.child.handleMessage('Hello from parent')
        }
      }
    }
    </script>
    
    
    <template>
      <div>
        <h1>{
        {
         message }}</h1>
      </div>
    </template>
    <script>
    export default {
        
      data() {
        
        return {
        
          message: 'Hello from child'
        }
      },
      methods: {
        
        handleMessage(message) {
        
          this.message = message
        }
      }
    }
    </script>

在这个示例中，父组件使用了$refs属性来访问子组件，然后调用了子组件的handleMessage方法。

### 结论 ###

这篇博客介绍了六种Vue组件通信的方式：Props /  e m i t 、 emit、 emit、parent /  c h i l d r e n 、事件总线、 P r o v i d e / I n j e c t 、 V u e x 和 children、事件总线、Provide / Inject、Vuex和 children、事件总线、Provide/Inject、Vuex和refs。每种方式都有其优缺点，我们可以根据具体的场景选择合适的方式来实现组件之间的通信。