vue组件通信及eventBus销毁、侦听处理

简介: vue组件通信及eventBus销毁、侦听处理

Bus.js

import Vue from 'vue'
export default new Vue()

A组件

import Bus from '@/store/Bus'

Bus.$emit('exportExcelFn')

B组件

import Bus from '@/store/Bus'
// 销毁上一个侦听器、不然会调用多次
Bus.$off('exportExcelFn')
Bus.$on("exportExcelFn", () => {
  this.$ExportExcel({
    columns: this.columns,
    tableData: this.$attrs.data,
    tableTitle: this.tableTitle,
    btnTitle: this.btnTitle,
    multipleSelection: this.multipleSelection
 })
})
相关文章
|
2天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
2天前
|
JavaScript 前端开发
[译] 复用 Vue 组件的 6 层手段
[译] 复用 Vue 组件的 6 层手段
|
3天前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
3天前
|
缓存 监控 JavaScript
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
该文章是《vue从安装到熟练 2022流畅无痛版》系列的第一季入门篇,介绍了Vue的基本概念、环境配置、项目创建与运行,并通过修改HelloWorld.vue和App.vue文件内容展示了如何在页面上显示"Hello World",最后还提供了Vue官方文档链接和介绍了Vue的常用内置指令和模板语法等基础知识。
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
|
1天前
|
资源调度 JavaScript 前端开发
Vue Router 的使用方式是什么
【8月更文挑战第30天】Vue Router 的使用方式是什么
8 2
|
2天前
|
JavaScript
Vue多图组合走马灯
这篇文章介绍了如何在Vue框架中创建一个多图组合的走马灯组件,允许自定义滑动间隔和图片区域宽度,以展示多个图片。
Vue多图组合走马灯
|
1天前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
|
1天前
|
JavaScript 前端开发 UED
揭秘Vue.js高效开发:Vue Router如何让单页面应用路由管理变得如此简单?
【8月更文挑战第30天】随着Web应用复杂性的增加,单页面应用(SPA)因出色的用户体验和高效的页面加载性能而备受青睐。Vue.js凭借简洁的语法和灵活的组件系统成为构建SPA的热门选择,其官方路由管理器Vue Router则简化了路由管理。本文通过实战示例介绍如何利用Vue Router实现高效的SPA路由管理,包括命名路由、动态路由及其核心优势。
|
1天前
|
JavaScript API 网络架构
vue 动态路由使用
【8月更文挑战第30天】vue 动态路由使用
10 0
|
2天前
|
JavaScript
vue知识点
vue知识点
6 0