Vue组件间通过EventBus传值时，有哪些注意事项和使用方法？

本文共计491个文字，预计阅读时间需要2分钟。

主要描述非父子组件之间的通信。项目场景：在app.vue中编写了一个公共的顶部导航栏navbar，右侧有一个分享按钮，但这个分享按钮只在特定页面显示。项目具体在lottery.vue页面。

主要想说下非父子组件之间的通信。

项目场景：

在app.vue里写了一个公共的顶部导航navbar，然后右侧有个分享按钮，而这个分享按钮只有在特定的页面才展示，项目里是在lottery.vue页面，然后想实现app.vue里点击分享按钮，触发lottery.vue里的分享方法。

解决：使用eventBus

1、创建一个event-bus.js

import Vue from 'vue'

export const EventBus = new Vue()

2、在app.vue引入eventbus，点击分享按钮时触发方法

import { EventBus } from '@/tools/event-bus' onClickRight () { EventBus.$emit('handleLotteryShare') }

3、在lottery.vue引入eventBus，在mounted里监听

import { EventBus } from '@/tools/event-bus' mounted () { EventBus.$on('handleLotteryShare', () => { this.doShare() }) },

4、到此解决了。