关于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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
js获取内联样式的方法
Jan 27 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 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
async和DOM Script文件加载比较
2014/07/20 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
javascript实现树形菜单的方法
2015/07/17 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
八大排序算法的Python实现
2021/01/28 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
大型车展策划方案
2014/02/01 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
班主任先进事迹材料
2014/12/17 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
解析Java异步之call future
2021/06/14 Java/Android