关于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 相关文章推荐
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
JS数据类型分类及常用判断方法
Nov 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
php xml 入门学习资料
2011/01/01 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python pandas生成时间列表
2019/06/29 Python
python梯度下降算法的实现
2020/02/24 Python
PyQt5实现登录页面
2020/05/30 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
Weblogc domain问题
2014/01/27 面试题
小学老师对学生的评语
2014/12/29 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年科协工作总结
2015/05/19 职场文书
复兴之路展览观后感
2015/06/02 职场文书
2016小学新学期寄语
2015/12/04 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis