关于vue中 $emit的用法详解


Posted in Javascript onApril 12, 2018

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn;

例如:子组件:

<template>  
 <div class="train-city">  
  <span @click='select(`大连`)'>大连</span>  
 </div>  
</template>  
<script>  
export default {  
 name:'trainCity',  
 methods:{  
  select(val) {  
   let data = {  
    cityname: val  
   };  
   this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件  
  }  
 }  
}  
</script>

父组件:

<template>  
  <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。  
<template>  
<script>  
export default {  
 name:'index',  
 data () {  
  return {  
   toCity:"北京"  
  }  
 }  
 methods:{  
  updateCity(data){//触发子组件城市选择-选择城市的事件   
   this.toCity = data.cityname;//改变了父组件的值  
   console.log('toCity:'+this.toCity)     
  }  
 }  
}  
</script>

结果为:

toCity: 大连

总结

以上所述是小编给大家介绍的关于vue中 $emit的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
下拉框select的绑定示例
Sep 04 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
JavaScript 实现继承的几种方式
Feb 19 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 #Javascript
JS中promise化微信小程序api
Apr 12 #Javascript
vue配置请求本地json数据的方法
Apr 11 #Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
JS实现的合并多个数组去重算法示例
Apr 11 #Javascript
JS实现的JSON数组去重算法示例
Apr 11 #Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
You might like
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
Protoss兵种对照表
2020/03/14 星际争霸
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
8个PHP数组面试题
2015/06/23 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
微信小程序的线程架构【推荐】
2019/05/14 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
基于python实现查询ip地址来源
2020/06/02 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
我读书我快乐演讲稿
2014/05/07 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
入团申请书格式
2019/06/20 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
CSS 圆形进度栏
2021/04/06 HTML / CSS
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL