범위 슬롯을 통해 하위 구성 요소로 양식 입력 요소를 전달하는 방법

범위 슬롯을 통해 하위 구성 요소로 양식 입력 요소를 전달하는 방법

슬롯을 통해 전달되는 입력 요소에 입력된 데이터에 어떻게 액세스하여 내부에 양식 요소가 있는 모달(modal)을 여는 하위 구성 요소에 액세스할 수 있는가?

나는 범위 슬롯에 대한 vue 문서를 읽어 보았지만, 솔직히 어떻게 하면 그것을 내 예에서 작동시킬 수 있는지 알 수가 없다.하위 구성 요소로 전달되는 v-모델과 함께 입력 요소를 사용하는 예는 없다.

다음 코드가 포함된 구성 요소 "BaseFormModal"을 생성했다.유효성 검사(Ve-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>

참조URL: https://stackoverflow.com/questions/62896548/how-to-pass-form-input-elements-via-scoped-slots-to-child-component