Question

我有以下三个组成部分。基本上，我需要CustomForm组件中的Submit事件，但它仅传递给父组件。是否有捷径可寻？我想避免使用事件总线。

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>

Answer 1

没有事件总线或Vuex，您需要使事件冒泡，以便在CustomForm发出事件时，FormHolder发出事件直到Page：

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

如何通过嵌套子组件传递事件？

1 个答案: