关于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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
如何基于js判断浏览器版本
Feb 20 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php 定界符格式引起的错误
2011/05/24 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
教你安装python Django(图文)
2013/11/04 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python绘制简单彩虹图
2018/11/19 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
七年级英语教学反思
2014/01/15 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL