vue事件发射与接收(可实现页面传值和非父子组件传值)
vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。
1).给data添加一个 名字为eventhub 的空vue对象,就可以在任何组件都可以调用事件发射接收的方法了,在main.js中添加:
new Vue({el: '#app',router,data: {eventHub: new Vue()},render: h => h(App),components: { App },template: '<App/>'
})
2).在home组件内调用事件接受参数($on监听)
mounted(){this.$root.eventHub.$on('事件名称', (data)=>{console.log('接受到的参数:'+data)} )},
3)在adress组件内调用事件触发 ($emit分发)
//通过this.$root.eventHub获取此对象
this.$root.eventHub.$emit('事件名称', '这里是参数,选中后的地址')
4). 在home组件中销毁($off取消)
beforeDestroy () {this.$root.eventHub.$off('事件名称')},
注:只要this.$root.eventHub.$off('事件名称')取消了事件,发现再次调用this.$root.eventHub.$on监听时不起作用了,不明白为什么?如果不取消监听就会监听几遍就会调用几遍方法,显然不合理,本人只是在项目中不让其取消监听的情况下做了次判断,让this.$root.eventHub.$on只走一次,不明所以然!希望哪位大神指出错误!!!
vue事件发射与接收(可实现页面传值和非父子组件传值)相关推荐
- Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.非父子组件传值 二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...
- vue中父子组件先后渲染_vue父子组件传值(子传父,非父子组件传值)
1. 子组件向父组件传值 子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
- 父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
- vue学习【非父子组件传值问题(Bus/总线/观察者模式)】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值 那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
- Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值 非父子组件指的是兄弟组件或完全无关的两个组件 兄弟组件 兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...
- vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
- Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述 以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
- 关于Vue非父子组件传值
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- Vue非父子组件传值+案例cnode首页
1. 创建公共实例化对象 const bus=new Vue() 2. 在需要发送数据的组件中 绑定事件 使用 bus.$emit发送数据 <button @click="send&q ...
- [Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)
核心: 在vue原型中挂载vue实例 通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数 在生命周期函数mounted中,通过this.bus.$on('传递出来的事件名 ...
最新文章
- [problem]快速排序和归并排序
- Android官方开发文档Training系列课程中文版:高效显示位图之在UI中展示位图
- c语言程序设计移动字母,C语言程序设计模拟试题二(含答案)
- Qtopia-2.2.0启动脚本
- leetcode—17.递归题目python解答
- jQuery 移除事件
- python的输入输出语句_Python基本输出语句/输入语句/变量解析
- 触发C#Button的双击事件
- html中的form是空标签么,关于html 中form表单的内标签和使用
- 算法设计与分析重点总结
- 嵌入式linux操作framebuffer显示bmp图片
- Java到底能做什么事情呢?
- 服务器 交换机 无线ap,交换机、路由器、防火墙、无线AP等和终端设备
- 读《因果的真相》第五章摘抄笔记
- ll和 amp amp c语言,ll 和 java
- php公众号解决投票刷票,微信公众号投票活动如何防止刷票现象
- 路由器与服务器延迟过高,路由器延迟高什么原因(图文)
- DEDE织梦常用的调用方法
- 如何在A4纸上打印标签
- 动态站点地图提交百度收录
热门文章
- getprop setprop初步探索
- linux内核中等待队列(wait_event,wake_up...)
- 树莓派和Ubuntu16 一些软件的安装
- jquery radio设置选中_前端jQuery实战之 attr() 和 prop() 的区别
- 使用VirtualBox在Ubuntu下虚拟Windows XP共享文件夹设置方法(亲测)
- Python学习(三)-----用户输入和while循环
- 51nod1003阶乘后边0的数量
- js怎么实现数组里的数据相加_C++如何实现大整数相加
- 华中科技大学历年计算机专业分数线,【华中科技大学】历年在各省份各专业的录取分数线...
- 深圳大学计算机与软件学院自考,如何坐公交 或 地铁去深圳的深圳大学南校区计算机与软件学院自考办| Moovit...