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

v-on="$listeners" 是 Vue.js 中的一个指令，它用于绑定父组件的监听器（listeners）到当前子组件的某个元素上。当你在使用组件时，你可能想要在子组件中触发父组件的事件。这时候，你可以使用 v-on="$listeners" 将所有父组件的监听器传递给子组件，而不是显式地定义每一个监听器。

这里是一个简单的例子：

假设我们有一个父组件 ParentComponent 和一个子组件 ChildComponent。

父组件：

<template>
  <div>
    <child-component v-on:foo="doSomething" v-on:bar="doSomethingElse"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    doSomething() {
      console.log('foo event triggered');
    },
    doSomethingElse() {
      console.log('bar event triggered');
    }
  }
}
</script>

子组件：

<template>
  <div>
    <!-- 使用 v-on="$listeners" 将父组件的所有监听器绑定到这个按钮上 -->
    <button v-on="$listeners">Click me</button>
  </div>
</template>

在这个例子中，当你在子组件内部点击按钮时，会触发父组件中定义的 doSomething 和 doSomethingElse 方法。这是因为我们在子组件中使用了 v-on="$listeners" 指令，它会自动将父组件的监听器绑定到按钮的点击事件上。