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 相关文章推荐
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
js实现微信聊天效果
Aug 09 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
详解Python if-elif-else知识点
2018/06/11 Python
python 以16进制打印输出的方法
2018/07/09 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python中的类与类型示例详解
2019/07/10 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python类如何定义私有变量
2020/02/03 Python
基于python实现删除指定文件类型
2020/07/21 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
材料专业毕业生求职信
2014/02/26 职场文书
小学毕业教师寄语
2019/06/21 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers