单击模态确定按钮时如何从另一个组件提交表单（bootstrap vue）

Question

在我的 Vue 应用程序中，我有一个处理名为 TodoForm 的简单表单的组件。使用 bootstrap-vue，我想在按下 bootstrap 模式的确定按钮时提交此表单。

代码如下所示：

<b-modal id="todo-form-modal">
    <todo-form />
</b-modal>

我不想将模态组件放在 TodoForm 组件中，因为 TodoForm 组件只处理表单行为，而不处理显示它的容器。

我也可以禁用“确定”按钮并自己在表单中放置一个按钮，但我确信有一个正确的、更好的方法来提交此表单（它更像是一个练习而不是一个真正的项目实际截止日期）。

我在文档中找到了 @ok 事件（按下 OK 按钮时触发），这很好，但我正在努力理解如何使用它来调用 onSubmit() TodoForm.

里面的方法

例如，它看起来像这样：

<b-modal id="todo-form-modal" @ok="something">
    <todo-form />
</b-modal>

理想情况下，@ok="something" 应该调用 TodoForm 组件内部的方法。

我怎样才能以正确的方式实现这一目标？

Answer 1

你要做的是在子组件中引用父组件。您可以为此使用 ref 属性。我不可能比官方文档更好地解释这一点，所以看看 this.

Answer 2

扩展@mapawa 的回答：

<template>
  <b-modal ... @ok="handleOk">
    <todo-form ref="todoform" ...></todo-form>
  </b-modal>
</template>

<script>
import TodoForm from 'somewhere/todoform'

export default {
  components: { TodoForm },
  methods: {
    handleOk(bvEvt) {
      // This assumes the root element of the todo form is the <form>
      this.$refs.todoform.$el.submit()
      // Alternatively, if your Todo Form exposes a submit method
      this.$refs.todoform.submit()
    }
  }
}
</script>

单击模态确定按钮时如何从另一个组件提交表单（bootstrap vue）

How to submit a form from another component when the modal OK button is clicked (bootstrap vue)

bootstrap-modal

vue.js

bootstrap-vue