vue全家桶进阶之路17:组件与组件间的通信
阅读原文时间:2023年08月25日阅读:3

在 Vue2 中,组件与组件之间的通信可以通过以下几种方式来实现:

  1. Props 和 Events

这是 Vue2 中最基础和常用的父子组件通信方式。父组件通过属性传递数据给子组件,子组件通过事件触发向父组件传递数据。

父组件传递数据到子组件:

子组件接收父组件传递的数据

子组件向父组件传递数据:

父组件监听子组件触发的事件:

  1. $parent 和 $children

在 Vue2 中,每个组件实例都有 $parent$children 属性,可以用来访问组件的父组件和子组件实例。

父组件可以通过 $children 访问子组件:

子组件可以通过 $parent 访问父组件:

  1. $refs

在 Vue2 中,可以使用 $refs 来访问组件的引用。可以通过 $refs 访问组件实例的方法和属性,也可以通过 $refs 传递数据。

4. Event Bus 在 Vue2 中,可以使用事件总线来实现任意组件之间的通信。事件总线本质上是一个空的 Vue 实例,用来作为中央事件总线,任意组件都可以监听事件和触发事件。 创建事件总线:

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

组件之间传递数据:

组件接收数据:

  1. Vuex

如果组件之间的通信比较复杂,或者需要在多个组件之间共享数据,可以使用 Vuex。Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,它集中管理组件之间共享的数据。

创建 store:

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

export const store = new Vuex.Store({
state: {
message: 'Hello, World!'
},
mutations: {
updateMessage(state, message) {
state.message = message;
}
},
actions: {
updateMessage(context, message) {
context.commit('updateMessage', message);
}
}
});

在组件中访问 store 中的数据:

在组件中触发 action:

更多关于 Vuex 的内容可以参考官方文档:https://vuex.vuejs.org/zh/