vue 事件中央总线

作用: 实现任意组件间的通信

实现的方法: 有以下两种方式

方式1: 全局事件总线

1.在main.js文件中定义

new Vue({ el: '#app', router, store, render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this } })

2.使用方法

this.$bus.$emit('定义名称',值) // 监听数据 (在mounted监听数据) this.$bus.$on('定义名称' val=>{}) // 销毁(在beforeDestroy销毁) this.$bus.$off('定义名称')

方式2:

1.在main.js的同级建一个bus.js

import Vue from "vue" export default new Vue

2.在main.js引入

// 事件中央总线传值 Vue.prototype.bus = new Vue();

3.使用方法

`// 1.引入(传值和监听数据部分都需引入bus.js文件)

import Bus from '@bus.js'

// 传值(我是在beforeDestroy中传值的)

Bus.$emit('定义名称',值)

// 监听数据 (我在beforeCreate 中监听数据)

Bus.$on('定义名称',val=>{})

//销毁(在监听数据页面的 beforeDestroy 中销毁)

Bus.$off('定义名称')

扩展: 还可以使用消息订阅与发布的方式 实现任意组件间的传值// 下载插件 pubsub-js

npm i pubsub-js --save

// 在需要传和监听的页面引入

import pubsub from 'pubsub-js'

// 发布(传值)

pubsub.publish('xxx',值)

// 订阅(接收)

this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{

// 注意 msgName的值为你定义的 xxx data为你真正传过来的 值

})

// 销毁 (在beforeDestroy)

pubsub.unsubscribe(this.pubId)

`

如果此篇博文对您有帮助,还请动动小手点赞 收藏 留言 呐~,谢谢 ~ ~

vue 事件中央总线的更多相关文章

  1. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  2. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  3. vue事件监听机制

    vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...

  4. Vue 事件的基本使用与语法差异

    "v-on:"可以简写为"@" "click"单击 "dblclick"双加 代码: <!doctype html ...

  5. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  6. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

  7. Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...

  8. Vue 事件的高级使用方法

    Vue 事件的高级使用方法 事件方法 在Vue中提供了4中事件监听方法,分别是: $on(event: string | Array, fn) $emit(event: string) $once(e ...

  9. vue bus 中央事件总线

    1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() //  全局引入mai.jsvue中央事件总 ...

  10. Vue事件总线(eventBus)$on()会多次触发解决办法

    项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...

随机推荐

  1. 关于model,modelsmanager,db以及phql之间关系的梳理

    摘要: model在前,db在model后面作为驱动支持.phql是phalcon自创的查询语言,主要特性是在sql语句中用模型名替代表名,其聪明地解析模型类,包括关联关系等,还支持参数绑定.mode ...

  2. 让 Serverless 更普惠,阿里云函数计算 FC 宣布全面降价,最大幅度达 37.5%

    11月5日,2022 杭州 · 云栖大会上,阿里云宣布函数计算 FC 开启全面降价,vCPU 单价降幅** 11%,其他的各个独立计费项最高降幅达 37.5%**. 本次云栖大会上,阿里云智能总裁张建 ...

  3. ssh免交互

    sshpass -p the_password ssh -o StrictHostKeyChecking=no root@domainname_or_ip remote_command  #远程执行命 ...

  4. day32 6 请求转发与重定向的区别、session会话对象 & cookie & 8 应用程序上下文对象ServletContext & 5 请求转发与jsp页面内置对象

    1 请求转发与重定向的区别 2 session与cookie的区别 3 过滤器与监听器的区别 4 web-inf目录 web-inf目录是安全目录,无法从客户端访问,只能通过(服务端的)servlet ...

  5. bug处理记录:Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=512M; support was removed in 8.0

    1. 报错: Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=512M; support was removed ...

  6. Servlet层

    package com.neu.servlet; import java.io.IOException;import java.io.PrintWriter;import java.util.Arra ...

  7. flutter系列之:如丝般顺滑的SliverAppBar

    目录 简介 SliverAppBar详解 SliverAppBar的使用 总结 简介 对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等.虽然我们可以用一个固定 ...

  8. MySQL字符编码、存储引擎、严格模式、字段类型之浮点 字符串 枚举与集合 日期类型

    目录 字符编码与配置文件 数据路储存引擎 创建表的完整语法 字段类型之整型 严格模式 字段类型之浮点型 字段类型之字符串类型 数字的含义 字段类型之枚举与集合 字段类型之日期类型 字符编码与配置文件 ...

  9. 现代 CSS 高阶技巧,不规则边框解决方案

    本文是 CSS Houdini 之 CSS Painting API 系列第四篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 现代 CSS ...

  10. Linux基础第一章 概述

    第一章 概述 1.1 前言 本章讨论系统的概念,从硬件.操作系统角度更加深刻的理解计算机系统,并快速浏览Linux系统提供的服务. 1.2 系统组成     1.3 操作系统和应用程序 操作系统这个词 ...