zoukankan      html  css  js  c++  java
  • EventBus使用详细介绍,vue两个页面通讯

    一、初始化
    首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种,新创建一个 .js 文件,比如 event-bus.js

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

    实质上EventBus是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法而已,因此它非常的轻便。

    另外一种方式,可以直接在项目中的 main.js 初始化 EventBus :

    // main.js
    Vue.prototype.$EventBus = new Vue()

    二、发送事件

    假设你有两个Vue页面需要通信: A 和 B ,A页面 在按钮上面绑定了点击事件,发送一则消息,想=通知 B页面。

    <!-- A.vue -->
    <template>
        <button @click="sendMsg()">-</button>
    </template>
    
    <script> 
    import { EventBus } from "../event-bus.js";
    export default {
      methods: {
        sendMsg() {
          EventBus.$emit("aMsg", '来自A页面的消息');
        }
      }
    }; 
    </script>

    接下来,我们需要在 B页面 中接收这则消息。

    三、接收事件

    <!-- IncrementCount.vue -->
    <template>
      <p>{{msg}}</p>
    </template>
    
    <script> 
    import { 
      EventBus 
    } from "../event-bus.js";
    export default {
      data(){
        return {
          msg: ''
        }
      },
      mounted() {
        EventBus.$on("aMsg", (msg) => {
          // A发送来的消息
          this.msg = msg;
        });
      }
    };
    </script>

    同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法:

    // 发送消息
    EventBus.$emit(channel: string, callback(payload1,…))
    
    // 监听接收消息
    EventBus.$on(channel: string, callback(payload1,…))

    作者:向建峰_Javan

    链接:

  • 相关阅读:
    馒头国家标准公布:应是圆形或椭圆形(图)
    完全用C#写的SharpOS 0.0.1版发布
    c#操作c/c++的Dll文件
    研究发现GSM信号影响睡眠
    解决QQ与360的终极解决方案
    分享一个参数检查的类
    问题是问题,可是出路呢?
    读《码斗士修炼之路》有感
    我看博客园之争论
    关于ORM的一点思考
  • 原文地址:https://www.cnblogs.com/Lolita-Q/p/15469049.html
Copyright © 2011-2022 走看看