在 Vue 2 中将事件轻松地从子组件传递到父组件

Question

我有一个BaseInput.vue接受属性并发出事件的基本组件。通过使用指令可以很容易地绑定所有属性v-bind="$attrs"。

// BaseInput.vue
<template>
  <label>
    <input
      v-bind="$attrs"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
    >
  </label>
</template>

<script>
export default {
  inheritAttrs: false,
};
</script>

接下来，我有一个包装器组件WrapInput.vue，它将属性传递给BasicInput并发出事件。

// WrapInput.vue
<template>
  <basic-input
    v-bind="$attrs"
    @focus="$emit('focus')"
    @blur="$emit('blur')"
  />
</template>

<script>
import BasicInput from '@/storybook/pages/BasicInput';

export default {
  components: { BasicInput },
  inheritAttrs: false,
};
</script>

我的问题：Vue 中有没有一种方便的方法可以在“代理”组件中传递一堆事件，而不需要一一列出它们？我期望这样的事情：

// WrapInput.vue
<template>
  <basic-input
    v-bind="$attrs"
    v-bind="$events" // is it possible to proxy all events in a single line?
  />
</template>

<script>
import BasicInput from '@/storybook/pages/BasicInput';

export default {
  components: { BasicInput },
  inheritAttrs: false,
};
</script>

PS 我听说过 EventBus，但不太适合我的情况。

Answer 1

在 Vue 2 中，您可以使用v-on和$listeners将任何事件侦听器传递给组件：

// BasicInput.vue
<input v-on="$listeners">

Vue 2 演示

在 Vue 3 中，$listeners已被删除，但任何事件监听器都将成为 的一部分$attrs，因此v-bind="$attrs"就足够了。

Vue 3 演示