如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路。本人在写项目中琢磨出来的,感觉挺好用,分享一下。

1.在utils文件夹下添加BusEvent.js

注释已经很详细了,也很简单,不再过多阐述。


import Vue from "vue";
const Bus = new Vue(); /**
* 同级组件通讯,提交事件
* @param {String} component 要提交的目标组件名称
* @param {string} action 要调用目标组件的方法名
* @param {any} param 目标组件的方法参数
*/
export const BusEmit = (component, action, param) => {
Bus.$emit(component, action, param);
}; /**
* 同级组件通讯,监听销毁事件
*/
export const BusOn = {
mounted() {
Bus.$on(`${this.$options.name}`, this.onBusAction);
},
beforeDestroy() {
Bus.$off(`${this.$options.name}`, this.onBusAction);
},
methods: {
onBusAction(action, param) {
log(`调用组件:${this.$options.name},方法:${action},参数:${param}`);
this[action](param);
}
}
};

2.需要监听事件的组件

引入 BusOn 挂载在组件的mixins上。


import { BusOn} from "@/utils/BusEvent";
export default {
name: "app",
mixins: [BusOn],
methods: {
show(is){
console.log(is);
}
}

3.发起通讯的组件

引入 BusEmit 发起同级组件通讯。


import { BusEmit} from "@/utils/BusEvent";
export default {
name: "child",
methods: {
emitShow(is){
//大概意思:我要调用 app 组件的 show 方法,并且传了一个 true 的参数
BusEmit("app","show",true)
}
}

好处:

  • 不用每个组件去引入Bus,然后在 mounted 监听,beforeDestroy 销毁(eventbus监听事件必须销毁),很繁琐。
  • 提供了良好的扩展,你想调用哪个组件,调用哪个方法,传递什么参数,很清晰。
  • 你可以在其他 js 文件 去引入并且调用组件的方法。

比如:在 htttp.js

省略了若干代码,定义了一个处理报错信息的函数。


import { BusEmit } from "../utils/event-bus";
**
* 请求失败后的错误统一处理
* * @param {Number} status 请求失败的状态码
*/
const errorHandle = err => {
//....省略
BusEmit("app","toast",{
text:'连接到服务器失败',
time:1000,
})
}

当然你可以在 BusEvent.js 进行更多的封装,或者你有更好的思路,欢迎分享讨论。

原文地址:https://segmentfault.com/a/1190000016992424

seventBus(封装) 一个巧妙的解决vue同级组件通讯的思路的更多相关文章

  1. vue-concise-slider 一个轻量的vue幻灯片组件

    vue-concise-slider 一个轻量的vue幻灯片组件 阅读 541 收藏 35 2017-07-03 原文链接:github.com 外卖订单处理有烦恼?试试美团点评餐饮开放平台吧,可实现 ...

  2. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  3. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  4. vue的组件通讯

    Vue的组件通讯又称组件传值 一.父子组件传值: 父组件: <子组件名   :动态变量名 (随便起)='你想要传递的数据' ></子组件名> 子组件: 利用 prop去接收父组 ...

  5. 使用vue.js封装一个包含图片的跑马灯组件

    初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...

  6. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  7. vue同胞组件通讯解决方案(以下为一种另外可用vuex解决)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  9. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

随机推荐

  1. 关于[WinError 10054] 远程主机强迫关闭了一个现有的连接。

    之前一直用python实现qq邮箱自动发送,都弄的好好的,然后今天一打开,就出现如题的错误,百度了许多,说,可能发送邮件次数过多,被当作是攻击,建议换个邮箱,换了也不行, 最后用手机给电脑分享Wifi ...

  2. Classical method of machine learning

    PCA principal components analysis kmeans bayes spectral clustering svm EM hidden Markov models deep ...

  3. OS | 冯诺伊曼体系和哈佛体系

    冯·诺伊曼结构(von Neumann architecture),也称普林斯顿结构,是一种将程序指令存储器和数据存储器合并在一起的计算机设计概念结构.本词描述的是一种实现通用图灵机的计算设备,以及一 ...

  4. Noip2017赛前的一些记录

    前言 已经退役整整五个月了....选考以后终于又摸上了键盘.... 但是码力已经大不如前了........ 距离比赛也就只有一星期了....那就胡乱的做一些题目吧QAQ 这里是一些根据算法分类的咋杂题 ...

  5. MySql_ procedure

    返回参数示例 下面是一个示例: delimiter //S drop procedure if EXISTS myzrz; CREATE PROCEDURE myzrz(in pin int,out ...

  6. Android中的动画总结

    文章主要内容来源<Android开发艺术探索>,部分内容来源网上的文章,文中会有链接. Android系统提供了两个动画框架:属性动画框架和View动画框架. 两个动画框架都是可行的选项, ...

  7. xpath的匹配规则

    starts-with 匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 i.e. //input[starts ...

  8. sql server 2008出现远程过程调用失败

    sql server  2008出现远程过程调用失败解决方式有下面几种: 1.依照网上说的方法.是由于装了vs 2012或是vs2013或是vs2015等高版本号时.安装了Microsoft SQL ...

  9. iOS 摇一摇的实现

    - (void)viewDidLoad { [super viewDidLoad]; [[UIApplication sharedApplication] setApplicationSupports ...

  10. vue-router篇

    目录结构: -lib-vue.js -lib-vue-router.js -js-main.js -index.html 1.安装和基本配置 2.传参以及获取传参 3.子路由 4.手动访问和传参 5. ...