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 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
浅析Ajax语法
Dec 05 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
node+vue实现文件上传功能
May 28 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正则
2006/07/07 PHP
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue跨域解决方法
2017/10/15 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
python简单贪吃蛇开发
2019/01/28 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
房产公证书范本
2014/04/10 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
卫生系统先进事迹
2014/05/13 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
python 制作一个gui界面的翻译工具
2021/05/14 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL