vue2 组件通信方式有哪些?

在 Vue 2 中，有几种常见的组件通信方式，包括：

父子组件通信（props 和事件）
子父组件通信（事件和 $emit）
兄弟组件通信（事件总线、Vuex 状态管理、共享父组件）
下面我将为每种方式提供一个代码示例。

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

父组件通过 props 将数据传递给子组件，子组件可以通过 $emit 触发事件来与父组件通信。

父组件：

Copy


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




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);
}
}
};


子组件：

Copy


{{ message }}
Send Message




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


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

子组件通过 $emit 触发事件，父组件通过监听该事件来获取子组件传递的数据。

父组件：

Copy


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




import ChildComponent from './ChildComponent.vue';

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


子组件:

Copy


Send Data




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


3. 兄弟组件通信（事件总线、Vuex 状态管理、共享父组件）

兄弟组件通信的方式较为灵活，可以使用事件总线、Vuex 状态管理或共享父组件来实现。

事件总线：

创建一个事件总线实例，兄弟组件通过该实例进行事件的发布和订阅。

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

兄弟组件：

Copy


Publish Event




import { EventBus } from './EventBus.js';

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


Vuex 状态管理：

使用 Vuex 来管理共享状态，兄弟组件可以通过修改和访问共享状态来进行通信。

Copy
// 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;
}
}
});

兄弟组件：

Copy


Update Message




import { mapActions } from 'vuex';

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


共享父组件：

兄弟组件通过共享父组件来传递数据，父组件将数据作为 props 传递给兄弟组件。

共享父组件：

Copy


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




import ChildComponent from './ChildComponent.vue';

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


兄弟组件：

Copy


{{ sharedMessage }}
Update Message




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


这些是在 Vue 2 中常见的组件通信方式的代码示例。