vue组件传参的方法--bus事件总线
定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件。事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on,$off,$emit的方法来进行事件的绑定,触发以及解绑。如果a组件要传递一个参数个b组件,b就可以在公共属性上绑定一个自定义事件,然后a通过$emit来出发这个自定义事件,并且携带要传递给b的参数,b通过事件的回调来接受a传递的参数。这样a,b组件之前的通信其实是通过操作公共属性来实现的,同理通过这样可以实现任意组件之间的通信。
标准写法
通过beforecreat钩子来将vm的实例对象赋给VUE原型中的X属性也就是公共属性$bus

注意要在接收参数的组件销毁之前调用beforedestroy钩子来对公共属性$bus中用来接收参数的自定义事件进行解绑来减少代码的开销。
vue组件传参的方法--bus事件总线的更多相关文章
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
- vue 组件传参
路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...
- vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- 前端vue组件传参
## 路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- vue 父子组件传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
随机推荐
- 微信h5支付/jsapi支付/小程序支付
一. 介绍------------------------------------------------------------------ 微信支付官方开发文档: https://pay.wei ...
- Python中关于进度条的6个实用技巧
1 简介 费老师我在几年前写过的一篇文章(https://www.cnblogs.com/feffery/p/13392024.html)中,介绍过tqdm这个在当下Python圈子中已然非常流行的进 ...
- win2008升级mysql5.7.20步骤总结
环境: 系统:红帽5.5 旧版mysql:5.5 新版mysql:5.7.20 前期准备: 1.备份旧版mysql数据,不知道data目录在哪可以在my.ini配置文件里面查看datadir指定的目录 ...
- I/O 引脚
我们以网卡举例 引脚,芯片,pcb板之间的关系非常紧密 1.引脚,又叫管脚,英文叫Pin. 就是从集成电路(芯片)内部电路引出与外围电路的接线,所有的引脚就构成了这块芯片的接口.引线末端的一段,通过软 ...
- 前台js发请求参数与后台接参数的问题
js函数中写参数,ajax中写参数,示例如下: function informationQuery(sign){//预警详情条件查询 $.get("/detail/informationQu ...
- AndroidStudio中的模块依赖引入后用不了
------------恢复内容开始------------ 在Android开发中,com.android.tools.build:gradle 3.0 以下版本依赖在gradle 中的声明写法: ...
- HTML5的基本功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- IOC容器--1.12. 基于 Java 的容器配置
用Java的方式配置Spring ,不使用Spring的XML配置,全权交给Java来做 JavaConfig是Spring的一个子项目,在Sring 4 之后成为核心功能 这种纯Java的配置方式 ...
- 如何改变函数内部 this 的指向
一.函数内 this 的指向 1. this 的指向是当调用函数时确定的,调用的方式不同,this 的指向也就不同. 1.1 this 一般是指向调用者. 函数类型 this 的指向 普通函数 Win ...
- fxksmdb.exe 是什么进程?
今天打开电脑应用进程发现fxksmdb.exe.fxksmpl.exe.fxksmW.exe三个进程,经过查看文件路径发现原来是施乐打印机的驱动程序自带的应用,平时都没注意到这个,这下放心了. 我这里 ...