Vue中如何实现非父子组件通讯？

百变鹏仔 3个月前 (09-26) #VUE

文章标签父子

vue是一种流行的javascript框架，用于构建用户界面。在vue的开发过程中，组件通信是一个重要的主题。vue提供了多种方式来实现组件之间的通信，其中包括父子组件通信、兄弟组件通信以及非父子组件通信等。本文将重点介绍如何在vue中实现非父子组件通信，并提供相应的代码示例。

在Vue中，非父子组件通信可以通过事件总线、vuex和provide/inject等方式来实现。下面将详细介绍每种方式的实现方法。

事件总线(Event Bus)
事件总线是一种通过中央事件管理器来实现组件通信的方式。在Vue中，可以使用Vue实例作为事件总线来发送和接收事件。具体步骤如下：

（1）创建事件总线实例：

// EventBus.jsimport Vue from 'vue'export const EventBus = new Vue()

（2）在发送事件的组件中，使用$emit方法来发送事件：

// ComponentA.vueimport { EventBus } from './EventBus.js'export default {  methods: {    handleClick() {      EventBus.$emit('event-name', eventData)    }  }}

（3）在接收事件的组件中，使用$on方法来监听事件：

立即学习“前端免费学习笔记（深入）”；

// ComponentB.vueimport { EventBus } from './EventBus.js'export default {  mounted() {    EventBus.$on('event-name', (eventData) => {      // 处理事件    })  }}

vuex
vuex是Vue的官方状态管理库，提供了集中式存储管理应用的所有组件状态的机制。组件可以通过vuex来共享状态并实现非父子组件通信。具体步骤如下：

（1）安装和配置vuex：

npm install vuex

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    count: 0  },  mutations: {    increment(state) {      state.count++    }  },  actions: {    increment(context) {      context.commit('increment')    }  }})

（2）在需要共享状态的组件中，使用mapState、mapMutations和mapActions来获取和修改状态：

// ComponentA.vueimport { mapState, mapMutations } from 'vuex'export default {  computed: {    ...mapState(['count'])  },  methods: {    ...mapMutations(['increment'])  }}

// ComponentB.vueimport { mapState, mapActions } from 'vuex'export default {  computed: {    ...mapState(['count'])  },  methods: {    ...mapActions(['increment'])  }}

provide/inject
provide/inject是Vue2.2.0版本引入的一种新的非父子组件通信方式。通过provide选项和inject选项来实现父组件向子孙组件传递数据的目的。具体步骤如下：

（1）在父组件中，使用provide选项来提供数据：

// ParentComponent.vueexport default {  provide() {    return {      dataName: this.data    }  },  data() {    return {      data: 'some data'    }  }}

（2）在子组件中，使用inject选项来注入数据：

// ChildComponent.vueexport default {  inject: ['dataName']}

文章推荐

Vue中如何实现非父子组件通讯？

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器