Vue 組件之間的通信方式詳解

更新時間：2024年06月07日 14:51:54 作者：沉浮yu大海

在 Vue.js 中,組件是構建應用程序的基本單位,然而,當你的應用程序變得復雜時,組件之間的通信變得至關重要,本文將介紹幾種 Vue 組件之間通信的方式,幫助你更好地管理和組織代碼,感興趣的朋友一起看看吧

父子組件通信

父組件可以通過 props 向子組件傳遞數(shù)據(jù)，子組件則可以通過 $emit 向父組件發(fā)送事件。

通過 props 傳遞數(shù)據(jù)

父組件通過 props 向子組件傳遞數(shù)據(jù)：

<!-- 父組件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

子組件通過 props 接收數(shù)據(jù)：

<!-- 子組件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

通過 $emit 發(fā)送事件

子組件通過 $emit 向父組件發(fā)送事件：

<!-- 子組件 -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from Child!');
    }
  }
};
</script>

父組件監(jiān)聽子組件的事件：

<!-- 父組件 -->
<template>
  <div>
    <child-component @message-sent="handleMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);  // 輸出 'Hello from Child!'
    }
  }
};
</script>

兄弟組件通信

兄弟組件之間通常通過事件總線（Event Bus）或 Vuex 狀態(tài)管理來實現(xiàn)通信。

使用事件總線

創(chuàng)建一個事件總線：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在兄弟組件中使用事件總線：

<!-- 組件 A -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', 'Hello from Component A!');
    }
  }
};
</script>
<!-- 組件 B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-sent', (message) => {
      this.message = message;
    });
  }
};
</script>

使用 Vuex

使用 Vuex 是管理應用程序狀態(tài)的最佳實踐。首先安裝并配置 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;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  }
});

在組件中使用 Vuex：

<!-- 組件 A -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$store.dispatch('updateMessage', 'Hello from Component A!');
    }
  }
};
</script>
<!-- 組件 B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
};
</script>