WebGIS前端学习之路：Vue-Bus事件车实现组件间简单通信

最新推荐文章于 2024-05-04 09:36:56 发布

木直想写好代码

最新推荐文章于 2024-05-04 09:36:56 发布

阅读量309

点赞数

文章标签：前端 vue.js javascript 前端框架学习

本文链接：https://blog.csdn.net/weixin_52628862/article/details/125722905

版权

一、安装插件

1、打开小黑窗，cd到项目文件夹下，输入下面的代码

npm install vue-bus

1、在main.js中引入并使用

import VueBus from 'vue-bus';
Vue.use(VueBus);

1、在其中的一个组件添加button按钮，并绑定click事件，事件触发Vue-Bus发送信息，代码如下

第一个参数是发送与接收的信号，要保持一致，第二个参数是发送的内容。

this.$bus.emit('sendMsg', '踢球的rapper超酷');

2、在另一个组件里面接收信息。首先在组件的created周期开始监听信号，在beforeDestroy周期关闭监听信号，代码如下

第一个参数要和发送信号的组件保持一致，这样才可以接收到信息，第二个参数是触发的方法。

created() {
  this.$bus.on('sendMsg', this.showMsg);
},
beforeDestroy() {
  this.$bus.off('sendMsg', this.showMsg);
}

接收到的信息已经包括了前面提到的“踢球的rapper超酷”，因此，在编写showMsg方法的时候需要设一个形参来接收信息，然后赋值给当前组件的msg，最后展示在界面上，具体如下图

1、首先打开接收信息的组件，原因是需要初始化监听信号，也就是created周期里的监听，然后再点击按钮发送信息，如果显示了“踢球的rapper超酷”，说明成功啦！具体如下图所示

关注