首页 > 其他分享 >Vue全局事件总线(GlobalEventBus)

Vue全局事件总线(GlobalEventBus)

时间:2023-06-08 17:23:34浏览次数:39  
标签:Vue bus 总线 GlobalEventBus 事件 组件 全局

Vue全局事件总线
1、一种组件间通信的方式,适用于任意组件间通信。

2、安装全局事件总线

// main.js 中 安装全局事件总线
new Vue({
  render: h => h(App),
  beforeCreate() { 
    Vue.prototype.$bus = this // 安装全局事件总线,$bus就是当前的vue实例
  }
}).$mount('#app')

3、使用事件总线

(1)、接收数据:A组件想要接收数据,则在A组件中给$bus监听自定义事件,事件的回调留在A组件自身

methods: {
    demo(data) { }
  },
  mounted() {
    this.$bus.$on('xxx',this.demo) 
  },

(2)、提供数据 

this.$bus.$emit('xxx',数据)

4、最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件

beforeDestroy() { 
    this.$bus.$off('xxx')
  }

 

标签:Vue,bus,总线,GlobalEventBus,事件,组件,全局
From: https://www.cnblogs.com/hyt09/p/17467135.html

相关文章

  • JS stacktrace Vue 项目过大内存泄漏
    1.运行以下命令npminstall-gincrease-memory-limitincrease-memory-limit4096mb#改成适合本机的内存2.可能会提示  "node--max-old-space-size=10240"'不是内部或外部命令,也不是可运行的程序在node_modules文件夹下的.bin文件夹搜索"%_prog%"替换成%_prog%......
  • vue3中使用less
    在Vue3中使用Less(LeanerStyleSheets)可以通过以下步骤完成:安装less和less-loader:首先,你需要安装Less和LessLoader依赖。在Vue项目的根目录下,可以使用npm或yarn运行以下命令来安装它们:npminstalllessless-loader或yarnaddlessless-loader配置webpack:VueCLI默认......
  • vue文档下载
    文档中{普通文字}{%图片}{%%居中图片}<template><el-date-pickerv-model="value"class="timePicker"type="day"placeholder=""format="YYYY-MM-DD"......
  • Vue3从入门到精通(二)
    vue3侦听器在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。创建侦听器可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相同。示例如下:<template><div>{{messa......
  • 解决Vue项目在刷新页面时出现404错误的问题
    使用HTML5的history模式的问题在本地运行Vue项目时,可以直接点击路由跳转,并且刷新页面也没有问题。这是因为VueRouter默认使用HTML5的history模式,它通过修改浏览器历史记录来控制页面跳转,而不发送实际的HTTP请求。然而,当将Vue项目发布到服务器上时,服务器会根据实际的HTTP请求来......
  • Vue进阶(幺幺捌):CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nt
    (文章目录)1.first-child(IE7兼容)、last-child(IE8不兼容)html:<body><h2>列表</h2><ul><li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目4</li></ul></body&g......
  • VUE Error: Cannot call .tap() on a plugin that has not yet been defined. Call pl
    在对一个vue项目执行过“npmauditfix--force”命令之后,就出现了如下错误: ERROR Error:Cannotcall.tap()onapluginthathasnotyetbeendefined.Callplugin('preload').use(<Plugin>)first.有2个解决方法:方法一:删除之前的源码模块,重新下载后执行“npminstall......
  • Vue-cli
    目录Vue-CLI1单文件组件2vue-cli创建项目3.1vue-cli创建项目3.1.1vue-cli命令行创建项目3.1.2使用vue-cli-ui创建4vue项目目录结构4.1运行vue项目4.2vue项目的目录结构5vue项目编写规范5.1修改项目5.2以后写vue项目,只需要在固定位置写固定代码即可6es6导入导出语法默......
  • Vue零基础开发入门
    讲解部分Vue基础语法,通过TodoList功能编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。1案例1.1下载安装https://v2.cn.vuejs.org/v2/guide/installation.html:1.2原生实现打印<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8......
  • Vue组件
    目录一组件介绍1.1组件是什么?有什么作用1.2组件的分类二组件的定义方式2.1定义全局组件2.2定义局部组件2.3总结三组件间通信3.1父传子属性验证3.2子传父3.3ref属性(也可以实现组件间通信:子和父都可以实现通信)1.ref属性放在普通标签上2.ref属性放在组件上四动态组件4.1......