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中各种编码解码函数的区别和注意事项
Aug 19 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
vue-resourc发起异步请求的方法
Feb 11 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中如何调用用户自定义函数
2013/08/06 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
abstract是什么意思
2012/02/12 面试题
写自荐信的七个技巧
2013/10/15 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
ktv筹备计划书
2014/05/03 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
素质教育学习心得体会
2016/01/19 职场文书
同学聚会开幕词
2019/04/02 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
MySQL优化及索引解析
2022/03/17 MySQL