Vue中$bus事件总线

news/2024/7/19 15:19:12 标签: js, vue, javascript, vue.js, html5

不说废话,直接看用法:

1、在 main.js 中将 $bus 绑定到 vue 原型上

javascript">Vue.prototype.$bus=new Vue()

2、在需要传递信息的组件上将一个方法发射出去,并需要在某个条件激活这个方法

<div @click="busclick"> </div>
methods(){
busclick(){
this.$bus.$emit('busfunction')
}
}

3、在组件的创建时 created 中接收 emit 的方法,并执行回调函数

javascript">created(){
this.$bus.$on('busfunction',()=>{
 this.$refs.scroll.refresh()
})
}
}

4、在 beforeDestroy 里销毁事件总线,不销毁的话会一直叠加的调用这个方法,如果这个子组件在不同的页面都调用这个子组件,那么在一个父组件 this.bus.off("busfunction"); 会把其他附件也销毁,如果只单独销毁一个父组件,那么需要在后面指定调用函数 this.bus.off("busfunction",callback());

javascript">beforDestroy(){
         this.$bus.$off("busfunction");  //当这个组件销毁的时候bus也跟着一起销毁
}.
  beforDestroy(){
         this.$bus.$off("busfunction",callback());  //当这个组件销毁的时候bus也跟着一起销毁
}

注意:
如果组件中使用 keep-alive 缓存组件,beforeDestroy 生命周期会不能使用,那么需要在keep-alive 生命周期 deactivated 中销毁事件总线


http://www.niftyadmin.cn/n/1527290.html

相关文章

Vue核心知识总结(超级经典,实时更新)

喜欢的小伙伴点赞收藏哦1、Vue基础入门1.1、脚手架环境安装Vue1.2、创建Vue项目1.3、精简项目代码2、Vue的核心概念2.1、指令2.1.1、文本指令2.1.2、流程控制2.1.3、显示与隐藏2.1.4、属性绑定2.1.5、事件处理2.1.6、表单绑定2.1.7、编译处理2.1.8、插槽2.2、选项2.2.1、数据选…

安装程序无法自动安装Virtual Machine Communication Interface Sockets(VSock)驱动程序

关于 VMware Tools安装时出现的问题的解决办法&#xff1a; 安装时出现问题对话框&#xff1a; 安装程序无法自动安装Virtual Machine Communication Interface Sockets&#xff08;VSock&#xff09;驱动程序。必须手动安装此驱动程序 可以通过安装windows更新解决&#xf…

华为路由器交换机快捷键大全

彩色快捷键是我最喜欢用的4个。 CTRL_A 将光标移动到当前行的开头。 CTRL_B 将光标向左移动一个字符。 CTRL_C 停止当前正在执行的功能。 CTRL_D 删除当前光标所在位置的字符。CTRL_E 将光标移动到当前行的末尾。 CTRL_F 将光标向右移动一个字符。 CTRL_H 删除光标左侧的一个…

开启windows 10的远程桌面服务

windows操作系统中有一个远程桌面服务&#xff0c;很好用。今天介绍一下如何用启用。 我这里主要是用命令启用&#xff0c;因为windows 10的最新版本的系统&#xff0c;属性很不不友好了&#xff0c;所以我这里全部用命令操作。图形操作的有空再说。 这个功能是一个服务&…

Vue中的侦听器(watch)

watch概述 监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值&#xff0c;用一个函数取代。 简洁的说&#xff1a;watch的作用可以监控一个值的变换&#xff0c;并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 普通监听 <body&g…

Vue中的插槽(v-slot)

在 2.6.0 中&#xff0c;我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。 具名插槽 相对匿名插槽组件slot标签带name命名的 书写组件&#xff1a; Vue.compone…

ajax、axios、fetch的区别

ajax $.ajax({type: POST,url: url,data: data,dataType: dataType,success: function () {},error: function () {} });传统 Ajax 指的是 XMLHttpRequest&#xff08;XHR&#xff09;&#xff0c; 最早出现的发送后端请求技术&#xff0c;隶属于原始js中&#xff0c;核心使用…

Vuex辅助函数的使用(mapState、mapActions、mapMutations、mapGetters)

本文章介绍vuex中辅助函数的使用&#xff0c;如果想学习vuex基础的小伙伴可以点击此链接进入上一篇文章 一、为什么需要使用辅助函数 当一个组件需要对多个状态进行操作的时候&#xff0c;代码会有些重复和冗余&#xff0c;我们可以使用辅助函数帮助我们用极少的代码解决这些…