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 form 验证函数 弹出对话框形式
Jun 23 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
jQuery事件对象总结
Oct 17 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
微信小程序实现电子签名并导出图片
May 27 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
第六节--访问属性和方法
2006/11/16 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
jQuery操作动画完整实例分析
2020/01/10 jQuery
python之wxPython应用实例
2014/09/28 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
酒店总经理欢迎词
2014/01/08 职场文书
护理目标管理责任书
2014/07/25 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
银行先进个人总结
2015/02/15 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫