肥仔教程网

$listeners对象在Vue3中已经被移除。现在事件监听器是$attrs的一部分。

2.X语法：

在Vue2中，你可以使用this.$attrs和this.$listeners分别访问传递给组件的attribute和事件监听器。结合inheritAttrs：false，开发者可以将这些attrbute和监听器应用到其他元素，而不是根元素：

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

3.X语法：

在Vue3.X的虚拟DOM中，事件监听器现在只是以on为前缀的attrbute，这样就成了$attrs对象的一部分，因此$listeners被移除了。

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

如果这个组件接收一个id attribute和一个v-on:close监听器，那么$attrs对象现在将如下所示：

{
  id: 'my-input',
  onClose: () => console.log('close Event triggered')
}