CODEWITHSUNDEEP
vue.js
Felipe Endlich
Felipe Endlich

Reputation: 610

How to pass all events to parent in VueJS

Passing Props

In VueJS if you set inheritAttrs to false and use v-bind="$attrs" you pass all props not declarated in a component to its child. Is there a similar way to pass all events coming from child to its parent in VueJS?

Code Example

Wrapper

<template>
  <child-component v-bind="$attrs" />
</template>

<script>
module.exports = {
  inheritAttrs: false
  ...
}
</script>

Child

<template>
  ...
</template>

<script>
module.exports = {
  ...
  props: {
    prop1: Boolean,
    prop2: Boolean
  }
  ...
}
</script>

Parent

<template>
  <wrapper :prop1="false" :prop2="true" />
  ...
</template>

Upvotes: 6

Views: 6659

Answers (1)

Anatoly
Anatoly

Reputation: 22758

To pass all events use

v-on="$listeners"

For Vue 3.x:

v-bind="$attrs"

see listeners removed
(thanks to AverageHelper)

Upvotes: 21

Related Questions