In my project, I created a base component called BaseInput.vue which accepts attributes and emits events. To easily bind all attributes, I use the v-bind="$attrs" directive.
// 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 another component called WrapInput.vue that acts as a wrapper for BasicInput by passing attributes and emitting 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 query is whether there is a more efficient way in Vue to pass multiple events to "proxy" components without having to list them individually. I envision something like this:
// WrapInput.vue
<template>
<basic-input
v-bind="$attrs"
v-bind="$events" // Is there a way to proxy all events in one line?
/>
</template>
<script>
import BasicInput from '@/storybook/pages/BasicInput';
export default {
components: { BasicInput },
inheritAttrs: false,
};
</script>
P.S. Although I've heard about EventBus, it doesn't seem to be the best fit for my specific situation.