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

标准写法

通过beforecreat钩子来将vm的实例对象赋给VUE原型中的X属性也就是公共属性$bus

注意要在接收参数的组件销毁之前调用beforedestroy钩子来对公共属性$bus中用来接收参数的自定义事件进行解绑来减少代码的开销。

vue组件传参的方法--bus事件总线的更多相关文章

  1. vue组件传参

    一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...

  2. vue 组件传参

    路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...

  3. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  4. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  5. 前端vue组件传参

    ## 路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name ...

  6. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  7. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  8. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

  9. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

随机推荐

  1. vue在移动端的自适应布局

    一. 安装插件(lib-flexible 和 postcss-loader.postcss-px2rem) npm i lib-flexible --save npm install postcss- ...

  2. 微信分享报错config:invalid url domain

    错误类型:invalid url domain 调试返回参数: { "errMsg": "config:invalid url domain" } 截图: 环境 ...

  3. mint-ui中messagebox的使用

    效果图: 代码: // 安装 # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S // 引入全部组件 import ...

  4. css3 calc浏览器中显示Invalid propety value

    在写前端页面样式中使用calc 显示Invalid property value 后来查了文档之后才发现是自己的格式不对 我的写法: .clac { width:calc(100%-112px); } ...

  5. window.location.href用法与a标签的比较

    1.在使用这两种方法进行页面的跳转时,这两种方法都能够有效的实现该功能 但是其原理不尽相同 第一:window.location.href()方法必须书写在js中 <html> <h ...

  6. pip 和 Conda 镜像站配置

    如果你经常使用 Python,那么你对 pip 和 Conda 一定不陌生,它们作为包管理器,可以非常方便的帮助我们下载需要的 Python 包,但是受限于大多 Python 包的服务器在国外,国内下 ...

  7. 帝国CMS 给简介字段添加一键排版按钮

    帝国CMS后台->管理数据表->选择数据表>打开smalltext字段输入表单替换html代码 添加如下代码: <script> function format() { ...

  8. linux中find与三剑客之grep用法

    find用法 find一般用来用来查找文件名称 根据文件的名称或者属性查找文件. 语法格式: find [查找范围] [参数] 参数: -name : 按照文件的名字查找文件 * :通配符 -inam ...

  9. JavaScript学习总结3-函数

    JS如果没能完return,等函数完全执行完毕也会返回NaN(undefined) 因为JS高度自由性,不像C.C++.Java等,函数传参有较严格的限制,JS可以完函数内传任意数量个参数,也可以不传 ...

  10. 20202127 实验一《Python程序设计》实验报告

    20202127 2022-2022-2 <Python程序设计>实验一报告课程:<Python程序设计>班级: 2021姓名: 马艺洲学号:20202127实验教师:王志强实 ...