vue 2.4版本中 $lisener

原创于 2021-03-05 17:24:23 发布 · 299 阅读

CC 4.0 BY-SA版权

50 篇文章

订阅专栏

本文解释了Vue中$listeners属性的作用，它收集了父组件传递给子组件的所有v-on事件，并介绍了如何在子组件中使用这些事件。

怎么理解vue中$listeners属性？
首先，$listeners是什么？
假设有父组件Parent和子组件Child

// Parent
<template>
  ...
  <child v-on:event-one="methodOne" v-on:event-two="methodTwo" />
  ...
</template>

那么你在使用Child时，传入的所有v-on事件都可以在$listeners对象中找到。

// Child
created () {
  console.log(this.$listeners) // { 'event-one': f(), 'event-two': f() }
}

所以，$listeners就是把用户传入的v-on方法收集起来了。
然后通过v-on="inputListeners"的形式，转发给了input框。