Vue 中实现非父子组件通信的多种方式及代码示例

咱们来谈谈Vue组件通信的话题，就像大家在聚会上话匣子一样停不下来，都想和别人交流。今天我要教你们怎么在Vue里解决非父级组件之间的聊天问题，这样你们可以随时随地分享喜怒哀乐，结识更多志同道合的伙伴！

事件总线：派对的中央广播站

别害羞，聚会上大大方方说出来，大家都会听到的！就是像Vue事件那样的事情，大家不都这样吗？

首要任务是弄清事情的顺序，跟开广播站似地。想说啥就大声喊出来，用$emit搞定；等待接收信息，就像是等电话响了再接，用$on处理！

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

vuex：派对的状态管理大师

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

大家聚会时是不是都喜欢有个人做主持？那你们觉得谁最受欢迎？这个时候vuex的优势就出来，这可是Vue网站强力推荐的一种高效状态管理小助手，让你轻松掌控各个组件状态。

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

学Vuex，就像找到个聚会的大管家，不管是音乐还是灯光，统统帮你搞定！学会用mapState、mapMutations和mapActions，咱们就能轻松驾驭它了，随时调整派对氛围。

provide/inject：派对的家族传承

npm install vuex

家人聚会聊八卦，私房话肯定不少，比如老爸藏着些啥宝贝。这时候，vue里面那个叫“提供/注入”的功能就派上用场！轻松搞定分享秘密的难题。

// store.js
import 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')
    }
  }
})

逗孩子太容易了，就像从自家保险箱拿东西似的。

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

记住这几个小妙招，用Vue的非父组件传话就变得小事一桩！这下子，咱们的互动更有意思，工作效率还提高不少！希望这些小秘诀能帮助大家更深入了解并运用Vue组件间的通讯技术，让你的编程之旅更加愉快顺利！

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