关于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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
jQuery 表格工具集
Apr 25 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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
PHP脚本的10个技巧(4)
2006/10/09 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
javascript实现连续赋值
2015/08/10 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
预备党员党校学习自我评价分享
2013/11/12 职场文书
升职自荐书范文
2013/11/28 职场文书
优秀演讲稿范文
2013/12/29 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
博士导师推荐信
2015/03/25 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
学校财务管理制度
2015/08/04 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
react中的DOM操作实现
2021/06/30 Javascript
Java中try catch处理异常示例
2021/12/06 Java/Android
vue+iview实现手机号分段输入框
2022/03/25 Vue.js