在 Vue 2 中收到 child 发出的事件时提交表单并触发 parent 方法
Submit a form and fire parent method when child emitted event is received in Vue 2
我有一个 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')
。
这是为什么?
@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
我有一个 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')
。
这是为什么?
@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