I have a base ponent 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 ponent 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 {
  ponents: { BasicInput },
  inheritAttrs: false,
};
</script>

My question: is there a handy way in Vue to pass a bunch of events in "proxy" ponents 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 {
  ponents: { BasicInput },
  inheritAttrs: false,
};
</script>

P.S. I've heard about EventBus, but doesn't fit nicely for my case.

I have a base ponent 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 ponent 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 {
  ponents: { BasicInput },
  inheritAttrs: false,
};
</script>

My question: is there a handy way in Vue to pass a bunch of events in "proxy" ponents 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 {
  ponents: { BasicInput },
  inheritAttrs: false,
};
</script>

P.S. I've heard about EventBus, but doesn't fit nicely for my case.

• javascript
• vue.js

• I think you have a same question asked here: stackoverflow./questions/53825246/… – Yash Maheshwari Commented Feb 26, 2021 at 4:14

2 Answers 2

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

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

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

You can just send the data from one ponent 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 ponent.

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