How to pass event from nested child component?

Question

I have the following three components. Basically I need the submit event from the CustomForm component but its' only passed to the parent component. Is there an easy way to do this? I want to avoid using an event bus.

CustomForm.vue

<template>
  <form @submit.prevent="submit">
    <slot />
  </form>
</template>

<script>
export default {
  methods: {
    submit() {
      this.$emit('onSubmit')
    }
  }
}
</script>

FormHolder.vue

<template>
  <div>
    <CustomForm>
      <slot />
      <FormSubmit />
    </CustomForm>
  </div>
</template>

Page.vue

<template>
    <FormHolder @onSubmit="submit">
      My input fields...
    </FormHolder>
</template>

aprouja1 · Accepted Answer · 2019-05-13 11:40:46Z

1

Without an event bus or Vuex, you need to bubble up the event so that when CustomForm emits an event, FormHolder emits an event up to Page:

<template>
  <div>
    <CustomForm @onSubmit="submit">
      <slot />
      <FormSubmit />
    </CustomForm>
  </div>
</template>

answered May 13, 2019 at 11:40

aprouja1

1,82011 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass event from nested child component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related