在 Vue 2 中收到 child 发出的事件时提交表单并触发 parent 方法

Question

我有一个 parent 容器 App.vue。在 App.vue 我有一个 <form></form>。在该表单中，我有一个 child 组件。在 child 中，我使用的是自定义按钮组件。 App.vue --> Parent UserInfo.vue --> Child BaseButton.vue --> Child User.Info.vue

在 UserInfo.vue 中，我这样使用 BaseButton：

<base-button @click="sendData" />

用户信息 -> sendData()

sendData() {
  console.log('here')
  this.$emit('send-data-to-parent');
},

表格在App.vue

 <form @send-data-to-parent="submitThisForm">
    <user-info/>
 </form>

submitThisForm()

 submitThisForm() {
      console.log('test')
    }

当我单击按钮时，我在控制台中看到了 console.log('here')，但我没有看到 App.vue submitThisForm() 方法中的 console.log('test')。

这是为什么？

Answer 1

@send-data-to-parent="submitThisForm"

在您的表单元素上。尝试放入组件，如：

 <form>
    <user-info @send-data-to-parent="submitThisForm"/>
 </form>

工作示例：

https://codesandbox.io/s/condescending-panna-sxx6k3?file=/src/components/Parent.vue

在 Vue 2 中收到 child 发出的事件时提交表单并触发 parent 方法

Submit a form and fire parent method when child emitted event is received in Vue 2

vue.js

emit