关于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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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脚本中include文件出错解决方法
2008/11/20 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
js电话号码验证方法
2015/09/28 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
社区灵活就业证明
2014/11/03 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
会议主持词结束语
2015/07/03 职场文书
学习计划是什么
2019/04/30 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL