内容简介:如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路。本人在写项目中琢磨出来的,感觉挺好用,分享一下。1.在注释已经很详细了,也很简单,不再过多阐述。
如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的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 进行更多的封装,或者你有更好的思路,欢迎分享讨论。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 封装JDBC—非框架开发必备的封装类
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- docker 封装 alinode
- 封装Apk签名工具
- axios封装笔记
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。