Vue.js v-on=“$listeners“的使用

在 Vue.js 中，v-on=“$listeners” 是一个特殊的语法，用于将父组件传递下来的所有事件监听器绑定到子组件上。这里的 $listeners 是一个对象，包含了父组件传递给子组件的所有事件监听器。

使用 v-on=“$listeners” 的好处是，它允许子组件自动绑定所有从父组件传下来的事件监听器，而不需要在子组件中显式地声明和绑定每一个事件。这可以简化代码，并使得组件之间的通信更加灵活。

Parent.vue 的代码：

<template>  
  <div>  
    <child-component @click="handleClick" @dblclick="handleDoubleClick"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './Child.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleClick() {  
      console.log('Clicked!');  
    },  
    handleDoubleClick() {  
      console.log('Double clicked!');  
    }  
  }  
};  
</script>

Child.vue 的代码：

<template>  
  <div>  
    <!-- 使用 v-on="$listeners" 自动绑定所有事件监听器 -->  
    <button v-on="$listeners">Click me</button>  
  </div>  
</template>  
  
<script>  
export default {  
  // 无需显式声明和绑定事件  
};  
</script>

Parent.vue 组件传递了两个事件监听器给 Child.vue 组件：@click 和 @dblclick。在 Child.vue 组件中，我们使用 v-on=“$listeners” 来自动绑定这两个事件监听器到内部的 button 元素上。这样，当按钮被点击或双击时，相应的处理函数 handleClick 和 handleDoubleClick 会在父组件 Parent.vue 中被调用。

v-on=“$listeners” 在创建高阶组件或封装组件时特别有用，因为它允许你创建一个通用的组件，该组件可以接收并转发所有传入的事件监听器，而无需知道具体有哪些事件监听器。