vue2.0 中#$emit,$on的使用详解


Posted in Javascript onJune 07, 2017

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on

vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

例子:

//父组件
<template>
  <ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
  data () {
   return {
    selectType: 0,
  },
  methods: {
   onSelectType (type) {
    this.selectType = type
   }
  }
</script>

父组件使用@select-type="onSelectType"@就是v-on的简写,监听由子组件vm.$emit触发的事件,通过onSelectType()接受从子组件传递过来的数据,通知父组件数据改变了。

// 子组件
<template>
 <div>
  <span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
  <span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
  <span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
 </div>
</template>
<script>
  data () {
   return {
    selectType: 0,
  },
  methods: {
    select (type, event) {
      this.selectType = type
      this.$emit('select-type', type)
   }
  }
</script>

子组件通过$emit来触发事件,将参数传递出去。

以上所述是小编给大家介绍的vue2.0 中#$emit,$on的使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 #Javascript
详解Node.js 命令行程序开发教程
Jun 07 #Javascript
详解vee-validate的使用个人小结
Jun 07 #Javascript
微信小程序多张图片上传功能
Jun 07 #Javascript
Vue.js对象转换实例
Jun 07 #Javascript
深入理解Angular4中的依赖注入
Jun 07 #Javascript
Vue中保存用户登录状态实例代码
Jun 07 #Javascript
You might like
php网站地图生成类示例
2014/01/13 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
vue货币过滤器的实现方法
2017/04/01 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
python代码制作configure文件示例
2014/07/28 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
园林设计师自荐信
2013/11/18 职场文书
保护环境的建议书
2014/03/12 职场文书
优秀应届生求职信
2014/06/16 职场文书
报效祖国演讲稿
2014/09/15 职场文书
党员检讨书范文
2014/12/27 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书