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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
django 发送手机验证码的示例代码
2018/04/25 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
公司董事长职责
2013/12/12 职场文书
影视广告专业求职信
2014/09/02 职场文书
离婚起诉状范本
2015/05/19 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
公司安全管理制度范本
2015/08/05 职场文书
高一作文之乐趣
2019/11/21 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
MySQL数字类型自增的坑
2021/05/07 MySQL