Vue组件之间的通信方式都有哪些？

你的名字 2023-10-12 17:11 66阅读 0赞

Vue框架中，组件之间的通信是必不可少的。我们可以使用多种方式实现组件之间的通信，包括：

**1.父子组件通信**

父子组件通信是一种常见的通信方式，可以通过props属性实现父组件向子组件传递数据。例如：

// 父组件
    <template>
      <div>
        <child-component :message="msg"></child-component>
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue'
    
    export default {
      data() {
        return {
          msg: '父组件传递的消息'
        }
      },
      components: {
        ChildComponent
      }
    }
    </script>
    
    // 子组件
    <template>
      <div>{
       { message }}</div>
    </template>
    
    <script>
    export default {
      props: {
        message: {
          type: String,
          required: true
        }
      }
    }
    </script>

**2.子父组件通信**

子父组件通信与父子组件通信相反，是子组件向父组件传递数据。我们可以通过自定义事件实现。例如：

// 子组件
    <template>
      <button @click="sendMsg">向父组件发送消息</button>
    </template>
    
    <script>
    export default {
      methods: {
        sendMsg() {
          this.$emit('my-event', '子组件向父组件发送的消息')
        }
      }
    }
    </script>
    
    // 父组件
    <template>
      <div>
        <child-component @my-event="handleMsg"></child-component>
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue'
    
    export default {
      methods: {
        handleMsg(msg) {
          console.log('接收到的消息：', msg)
        }
      },
      components: {
        ChildComponent
      }
    }
    </script>

**3.非父子组件通信**

有时我们需要在非父子组件之间进行通信，Vue提供了多种方式实现。

3.1. 使用Event Bus

事件总线是一种非常方便的通信方式，我们可以定义一个空的Vue实例，将它作为事件中心，用于接收和分发事件。例如：

// Bus.js
    import Vue from 'vue'
    
    export const bus = new Vue()
    
    // A组件
    <template>
      <button @click="sendMsg">发送消息</button>
    </template>
    
    <script>
    import { bus } from './Bus.js'
    
    export default {
      methods: {
        sendMsg() {
          bus.$emit('my-event', 'A组件向B组件发送的消息')
        }
      }
    }
    </script>
    
    // B组件
    <template>
      <div>{
       { message }}</div>
    </template>
    
    <script>
    import { bus } from './Bus.js'
    
    export default {
      data() {
        return {
          message: ''
        }
      },
      created() {
        bus.$on('my-event', msg => {
          this.message = msg
        })
      }
    }
    </script>

3.2. 使用Vuex

Vuex是Vue的状态管理工具，它提供了一个集中式存储管理应用的所有组件中的状态。我们可以通过Vuex实现非父子组件之间的通信。例如：

// Vuex store
    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
        }
      },
      actions: {
        setMessage({ commit }, message) {
          commit('setMessage', message)
        }
      }
    })
    
    // A组件
    <template>
      <button @click="sendMsg">发送消息</button>
    </template>
    
    <script>
    import store from './store.js'
    
    export default {
      methods: {
        sendMsg() {
          store.dispatch('setMessage', 'A组件向B组件发送的消息')
        }
      }
    }
    </script>
    
    // B组件
    <template>
      <div>{
       { message }}</div>
    </template>
    
    <script>
    import { mapState } from 'vuex'
    
    export default {
      computed: {
        ...mapState([
          'message'
        ])
      }
    }
    </script>