脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2.0 on emit的使用

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

 更新时间：2017年06月07日 15:03:16   作者：m0_37068028  
这篇文章主要介绍了vue2.0 中#$emit,$on的使用详解,需要的朋友可以参考下

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的使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • vue中的数字滚动和翻牌器

    vue中的数字滚动和翻牌器

    这篇文章主要介绍了vue中的数字滚动和翻牌器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue elementui如何实现表格selection的默认勾选

    Vue elementui如何实现表格selection的默认勾选

    这篇文章主要介绍了Vue elementui如何实现表格selection的默认勾选问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 深入探讨Vue计算属性与监听器的区别和用途

    深入探讨Vue计算属性与监听器的区别和用途

    在Vue的开发中,计算属性（Computed Properties）和监听器（Watchers）是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
    2023-09-09
  • Vue2.x中的Render函数详解

    Vue2.x中的Render函数详解

    通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。Vue 的模板实际是编译成了 render 函数。
    2017-05-05
  • 解决vue v-for 遍历循环时key值报错的问题

    解决vue v-for 遍历循环时key值报错的问题

    今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 详解element上传组件before-remove钩子问题解决

    详解element上传组件before-remove钩子问题解决

    这篇文章主要介绍了详解element上传组件before-remove钩子问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Node.js使用orm2进行update操作时关联字段无法修改的解决方法

    Node.js使用orm2进行update操作时关联字段无法修改的解决方法

    这篇文章主要给大家介绍了Node.js使用orm2进行update操作时关联字段无法修改的解决方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • vue多页面项目中路由使用history模式的方法

    vue多页面项目中路由使用history模式的方法

    这篇文章主要介绍了vue多页面项目中路由如何使用history模式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

    vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

    这篇文章主要介绍了vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论