vue2 組件通信方式有哪些?

在 Vue 2 中，有幾種常見的組件通信方式，包括：

父子組件通信（props 和事件）
子父組件通信（事件和 $emit）
兄弟組件通信（事件總線、Vuex 狀態管理、共享父組件）
下面我將為每種方式提供一個代碼示例。

1. 父子組件通信（props 和事件）#

父組件通過 props 將數據傳遞給子組件，子組件可以通過 $emit 觸發事件來與父組件通信。

父組件：

<template>
  <div>
    <child-component :message="parentMessage" @update="handleUpdate"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleUpdate(newMessage) {
      console.log('Received message from child:', newMessage);
    }
  }
};
</script>

子組件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      const newMessage = 'Hello from child';
      this.$emit('update', newMessage);
    }
  }
};
</script>

2. 子父組件通信（事件和 $emit）#

子組件通過 $emit 觸發事件，父組件通過監聽該事件來獲取子組件傳遞的數據。

父組件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Received data from child:', data);
    }
  }
};
</script>

子組件：

<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = { message: 'Hello from child' };
      this.$emit('custom-event', data);
    }
  }
};
</script>

3. 兄弟組件通信（事件總線、Vuex 狀態管理、共享父組件）#

兄弟組件通信的方式較為靈活，可以使用事件總線、Vuex 狀態管理或共享父組件來實現。

事件總線：

創建一個事件總線實例，兄弟組件通過該實例進行事件的發布和訂閱。

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

兄弟組件：

<template>
  <div>
    <button @click="publishEvent">Publish Event</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    publishEvent() {
      const eventData = { message: 'Hello from sibling' };
      EventBus.$emit('custom-event', eventData);
    }
  }
};
</script>

Vuex 狀態管理：

使用 Vuex 來管理共享狀態，兄弟組件可以通過修改和訪問共享狀態來進行通信。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedMessage: ''
  },
  mutations: {
    updateSharedMessage(state, newMessage) {
      state.sharedMessage = newMessage;
    }
  },
  actions: {
    updateSharedMessage({ commit }, newMessage) {
      commit('updateSharedMessage', newMessage);
    }
  },
  getters: {
    getSharedMessage(state) {
      return state.sharedMessage;
    }
  }
});

兄弟組件：

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['updateSharedMessage']),
    updateMessage() {
      const newMessage = 'Hello from sibling';
      this.updateSharedMessage(newMessage);
    }
  }
};
</script>

共享父組件：

兄弟組件通過共享父組件來傳遞數據，父組件將數據作為 props 傳遞給兄弟組件。

共享父組件：

<template>
  <div>
    <child-component :sharedMessage="sharedMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      sharedMessage: ''
    };
  },
  methods: {
    updateSharedMessage(newMessage) {
      this.sharedMessage = newMessage;
    }
  }
};
</script>

兄弟組件：

<template>
  <div>
    <p>{{ sharedMessage }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['sharedMessage'],
  methods: {
    updateMessage() {
      const newMessage = 'Hello from sibling';
      this.$emit('update-message', newMessage);
    }
  }
};
</script>

這些是在 Vue 2 中常見的組件通信方式的代碼示例。