vuejs使用$emit和$on进行组件之间的传值的示例


Posted in Javascript onOctober 04, 2017

$emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了。

注意:$emit和$on的事件必须在一个公共的实例上,才能够触发。

例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件实现目录的展现,但是在vuejs框架里面,tree目录需要通过递归组件实现。

1、现在有两个组件,父组件contact_index.vue,子组件cust_tree.vue

vuejs使用$emit和$on进行组件之间的传值的示例

2、点击父组件里面的选择银行,跳出银行树目录结构(使用vuejs的递归组件实现),这里面需要做两种传值:

(1)父组件通过props将树目录的数据list传到子组件中形成目录结构的展示;

(2)子组件里面通过点击相应的银行请求查询银行的通讯录,这里面需要将点击的银行的机构代码回传给父组件,父组件接收后通过input将机构代码提交给后台请求查询;

第一种是父组件给子组件传值使用props即可,现在我们来谈谈第二种情况,如何将子组件的值回传给父组件。

网上百度千篇一律全是使用$emit来实现,可是都有一个严重的误区没有给别人说明,开始我都按照搜索的结果进行操作,都会出现子组件$emit后父组件没有监听到函数的变化,研究了好久才发现$emit和$on的事件必须在一个公共的实例上,才能够触发。我的操作如下:

首先在src目录下新加bus.js作为一个公共的实例

import Vue from 'vue'

export var bus = new Vue()

其次,父组件在created里面定义$on监听事件

//父组件与子组件都要import bus.js
import {bus} from '../../bus.js'
created(){
  bus.$on('custTreeSay',(id)=>{
  //监听传值--机构代码
  this.instCode = id;
  //关闭弹窗
  this.popupVisibleTree = false;
  //调用查询方法刷新通讯录列表
  this.query();
  });
  bus.$on('custTreeSayName',(name)=>{
  //监听传值--机构名称
  this.instName = name;
  });
}

最后,在子组件中定义点击事件,调用父组件方法通过$emit将相应值传给父组件

<span @click="propInstCode(model);propInstName(model)">
 {{model.name}}
</span>
<script type="text/javascript">
 import {bus} from '../../bus.js'
 export default {
  props: ['model'],//这里通过props接收父组件的传值
  
  //method钩子定义传值方法,这边需要传不同的值
  methods: {
  //通过总线将值传给父组件
  propInstCode:function (model) {
  //$emit触发当前实例事件
  bus.$emit('custTreeSay',this.model.id);
  },
  propInstName:function (model) {
  bus.$emit('custTreeSayName',this.model.name);
  }
 },
 }

这样就实现了子组件能通过$emit将值传给bus在传给父组件了,最后是通过传的机构代码传给提交给后台查询的,但是我们同时也需要相应的机构名字来给客户展现,所以这里面只需要设置两个input就行了,机构代码的input隐藏起来,需要传值,另外的机构名称的input显示出来就可以了,如下:

//将点击跳出目录选择的方法放到显示的机构选择就可以了
<div class="query_condition_item">
 <label>选择机构</label>
 <input name="instName" v-model="instName" readonly @click="showTree()">
</div>

<div class="query_condition_item">
 <input name="instCode" v-model="instCode" hidden>
</div>

这篇文章就到这里了,我将我开发遇到的一些问题经验记录下来,也希望能够帮到大家!!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
js 调用百度分享功能
Feb 27 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 #Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 #Javascript
You might like
PHP 微信支付类 demo
2015/11/30 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
轮播的简单实现方法
2016/07/28 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
PHP统计代码行数的小代码
2019/09/19 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2015中学教学工作总结
2015/07/22 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python