vue.js - 如何通过作用域插槽将表单输入元素传递给子组件

Question

如何访问在我的输入元素中输入的数据，这些数据通过一个插槽传递给我的子组件，该子组件打开一个包含表单元素的模式？

我一直在阅读有关作用域插槽的 vue 文档，但老实说，我只是无法弄清楚如何在我的示例中使其工作。这些示例都没有使用带有正在传递给子组件的 v-model 的输入元素。

我创建了一个包含以下代码的组件“BaseFormModal”：请注意，验证（vee-validate）发生在此处，因此当数据被认为有效时，此子组件会发出“提交”事件，然后我将其拾取我的父组件。

<template v-slot:default="slotProps">
  <b-modal ref="base-form-modal" :title="title" :no-close-on-backdrop="true" @ok.prevent="onSubmit">
    <validation-observer ref="observer" v-slot="{handleSubmit}">
      <b-form ref="form" @submit.stop.prevent="handleSubmit(onSubmit)">
        <slot />
      </b-form>
    </validation-observer>
  </b-modal>
</template>

<script>
import { ValidationObserver } from 'vee-validate'

export default {
  name: 'BaseFormModal',
  components: {
    ValidationObserver,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      formData: {},
    }
  },
  methods: {
    async onSubmit () {
      let valid = await this.$refs.observer.validate()
      if (!valid) {
        return
      }
      this.$emit('submit', this.formData)
      this.$nextTick(() => {
        this.$refs['base-form-modal'].hide()
      })
      this.formData = {}
    },
    showModal () {
      this.$refs['base-form-modal'].show()
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

在我的页面中，我有一个打开模式的按钮，如下所示：

<b-button variant="primary" @click="$refs['addOrgUserModal'].showModal()">
    <i class="far fa-plus" aria-hidden="true" /> {{ $t('organisation_settings_manage_users_add_user') }}
</b-button>

然后我在我的页面中定义了基本表单模式组件：

<base-form-modal
  ref="addOrgUserModal"
  :title="$tU('organisation_settings_manage_users_add_user_modal_title')"
  @submit="addOrgUser"
>
  <b-row>
    <b-col md="6">
      <form-control-wrapper :rules="{required: true}" :label="$tU('first_name_label')">
        <b-form-input
          v-model="user.firstName"
          type="text"
          lazy-formatter
          :formatter="trimSpaces"
          :placeholder="$t('first_name_field_placeholder')"
        />
      </form-control-wrapper>
    </b-col>
    <b-col md="6">
      <form-control-wrapper :rules="{required: true}" :label="$tU('family_name_label')">
        <b-form-input
          v-model="user.familyName"
          type="text"
          lazy-formatter
          :formatter="trimSpaces"
          :placeholder="$t('family_name_field_placeholder')"
        />
      </form-control-wrapper>
    </b-col>
  </b-row>
</base-form-modal>

标签： vue.jsvue-componentvuejs-slots