在vue3中使用v-bind="$attrs"二次封装的事件如何调用

在Vue 3中，使用`v-bind="$attrs"`可以将父组件传递的非props属性传递给子组件。如果你在子组件中对这些属性进行了二次封装，你可以通过以下两种方式来调用：

1. 直接使用`$attrs`中的属性名来调用

假设你在子组件中对`click`事件进行了二次封装：

<template>
  <button @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: String,
  },
  methods: {
    handleClick(event) {
      // 二次封装的事件处理函数
      this.$emit('my-click', event);
    },
  },
};
</script>

在父组件中，你可以这样使用：

<template>
  <my-button text="Click Me" v-bind="$attrs" @my-click="handleMyClick" />
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton,
  },
  methods: {
    handleMyClick(event) {
      console.log('My Click Event:', event);
    },
  },
};
</script>

注意，你需要使用`@my-click`来监听`MyButton`组件中的`$emit('my-click')`事件。

2. 使用`$listeners`来调用

在Vue 3中，你还可以通过`$listeners`来访问所有父组件传递给子组件的事件监听器。你可以在子组件中使用`$listeners`来继承父组件的事件监听器，然后在组件内部进行二次封装。例如：

<template>
  <button @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: String,
  },
  methods: {
    handleClick(event) {
      // 二次封装的事件处理函数
      this.$emit('my-click', event);
    },
  },
  mounted() {
    // 继承所有父组件传递的事件监听器
    Object.keys(this.$listeners).forEach((eventName) => {
      this.$el.addEventListener(eventName, this.$listeners[eventName]);
    });
  },
};
</script>

在父组件中，你可以这样使用：

<template>
  <my-button text="Click Me" v-bind="$attrs" @my-click="handleMyClick" />
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton,
  },
  methods: {
    handleMyClick(event) {
      console.log('My Click Event:', event);
    },
  },
};
</script>

注意，你不需要使用`@my-click`来监听`MyButton`组件中的`$emit('my-click')`事件，因为`$listeners`已经继承了父组件的事件监听器。