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
 })
})
相关文章
|
3天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
14 3
|
4天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
13 1
|
4天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
4天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
14 2
|
4天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
4天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0
|
4天前
|
缓存 JavaScript
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
21 2
|
4天前
|
JavaScript 安全
一文彻底学会vue的组件通信
Vue组件通信包括父向子通过`props`传递数据,如`&lt;Student :name=&quot;18&quot;&gt;&lt;/Student&gt;`,子组件通过`$emit`触发自定义事件与父组件通信,如`this.$emit(&#39;myEvent&#39;, this.name)`。此外,使用全局事件总线(`Vue.prototype.$bus`)可在多级组件间通信,通过`$on`订阅和`$emit`发布事件。还有消息订阅与发布模式,利用`pubsub-js`库实现更灵活的组件交互。
10 0
一文彻底学会vue的组件通信
|
4天前
|
缓存 JavaScript
一文彻底学会Vue路由
Vue Router简介,包括基本使用、嵌套路由、参数传递和路由守卫。首先,通过`npm i vue-router@3`安装,然后在`main.js`引入并应用。配置路由时,创建VueRouter实例,定义如`/home`、`/about`等路径及其对应组件。使用`&lt;router-link&gt;`进行切换,`&lt;router-view&gt;`展示组件。嵌套路由通过`children`配置多级路径,参数传递可使用`query`或`params`。路由守卫分为全局、独享和组件内三种,用于控制访问权限。
14 1
一文彻底学会Vue路由
|
5天前
|
JavaScript 前端开发 数据库
Vue技术文章
Vue技术文章