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

Question

I have a base component BaseInput.vue which accepts attributes and emits events. It's easy to bind all attributes by using v-bind="$attrs" instruction.

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

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

Next I have a wrapper component WrapInput.vue which passes attributes to BasicInput and emits events.

// 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>

My question: is there a handy way in Vue to pass a bunch of events in "proxy" components without the need to list them one by one? I expect something like this:

// 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 I've heard about EventBus, but doesn't fit nicely for my case.

Answer 1

In Vue 2, you could use v-on and $listeners to pass any event listeners to a component:

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

Vue 2 demo

In Vue 3, $listeners is removed , but any event listeners would be part of $attrs , so v-bind="$attrs" would suffice.

Vue 3 demo

Answer 2

Using Event Bus (Communication between any two components) An event bus is used to communicate between any two components (Components need not have a parent-child relationship). This can be used when one needs to manually listen for events on a component instance.

You can just send the data from one component using this.$root.$emit('name-of-emitter', args1, args2, ...) and is captured using the same name like this this.$root.$on('name-of-emitter', args1, args2, ...) in the other component.

Source of the answer: https://dev.to/sanchithasr/how-to-communicate-between-components-in-vue-js-kjc