Vue 组件间的通信除了 props 和事件之外的其他方式

Vue 组件间的通信除了 props 和事件之外的高级方式，下面将详细介绍几种常用的方法，并附上代码示例：

1. Vuex

Vuex 是 Vue 官方的状态管理库，它采用集中式存储管理应用的所有组件的状态，并提供了相应的 actions、mutations 以及 getters 来处理异步操作、状态改变和获取状态。在大型项目中，Vuex 可以帮助更好地组织和管理跨组件共享的数据。

// 在 store 文件夹下的 index.js 中创建 Vuex 状态树

import { createStore } from 'vuex';

export default createStore({

state() {

return {

count: 0,

};

},

mutations: {

increment(state) {

state.count++;

},

},

actions: {

asyncIncrement({ commit }) {

setTimeout(() => {

commit('increment');

}, 1000);

},

},

getters: {

doubleCount(state) {

return state.count * 2;

},

},

});

// 在组件中使用 Vuex

import { useStore } from 'vuex';

import { computed } from 'vue';

export default {

setup() {

const store = useStore();

// 访问状态

const count = computed(() => store.state.count);

// 触发 action

function increaseCount() {

store.dispatch('asyncIncrement');

}

// 使用 getter

const doubleCount = computed(() => store.getters.doubleCount);

return {

count,

increaseCount,

doubleCount,

};

},

};

1. Provide/Inject

Vue 提供了 provide 和 inject 选项来实现祖先组件向后代组件传递数据，无需通过中间组件逐层传递 props。

// 祖先组件（提供者）

export default {

provide() {

return {

message: 'Hello from ancestor',

};

},

};

// 后代组件（消费者）

export default {

inject: ['message'],

setup(props, context) {

const message = context.inject.message;

console.log(message); // 输出：'Hello from ancestor'

},

};

1. 全局事件总线 (EventBus)

创建一个全局事件中心，组件之间可以通过发布-订阅模式进行通信。

// 创建一个全局事件总线

import Vue from 'vue';

const EventBus = new Vue();

// 发送事件的组件

EventBus.$emit('custom-event', payload);

// 接收事件的组件

EventBus.$on('custom-event', (payload) => {

console.log(payload);

});

1. 第三方状态管理库

如 MobX 或 Redux，它们可以与 Vue 集成，提供不同的状态管理解决方案。

2. 组件树结构设计

利用组合式 API 和动态组件，根据业务逻辑设计合理的组件层级关系，通过父级组件向下传递方法或变量。

3. 自定义指令

自定义指令也可以作为一种特殊的通信方式，用于监听和操作 DOM 元素或其他组件行为。

// 注册自定义指令

Vue.directive('my-directive', {

bind(el, binding, vnode) {

el.addEventListener('click', () => {

vnode.context[binding.expression]();

});

},

});

// 在组件模板中使用自定义指令

<child-component v-my-directive="handleClick"></child-component>

// 在组件内定义相应的方法

export default {

methods: {

handleClick() {

console.log('Clicked!');

},

},

};