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 中常见的组件通信方式的代码示例。