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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
webpack的tree shaking的实现方法
Sep 18 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简单提示框alert封装函数
2010/08/08 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
Javascript中的this绑定介绍
2011/09/22 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python 函数基础知识汇总
2018/03/09 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python爬取指定微信公众号文章
2018/12/20 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python实现梯度下降法
2020/03/24 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
京剧自荐信
2014/01/26 职场文书
少先队入队活动方案
2014/02/08 职场文书
五型班组建设方案
2014/02/10 职场文书
后勤主管岗位职责
2014/03/01 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
护士个人自我鉴定
2014/03/24 职场文书
中国梦口号
2014/06/13 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python