Vue.js는 슬롯에서 컴포넌트 인스턴스로 데이터를 전달합니다.

Vue.js는 슬롯에서 컴포넌트 인스턴스로 데이터를 전달합니다.

Vue.js를 사용하여 AJAX를 통해 제출하는 폼을 처리하기 위해 재사용 가능한 컴포넌트를 구축하려고 합니다.HTML 대신 사용할 수 있는 범용 컴포넌트를 사용하는 것이 이상적입니다.form다음과 같은 미지의 폼 요소 세트를 포함할 수 있는 요소input,select,textarea기타 등등.

내 컴포넌트에 대해 다음과 같은 코드를 받았습니다.ajax-form:

<template>
    <form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
        <slot></slot>
    </form>
</template>

<script>
module.exports = {
    props: {
        action: {
            required: true,
            type: String
        },
        method: {
            default: 'post',
            required: false,
            type: String
        }
    },
    data() {
        return {
            formData: {}
        }
    },
    methods: {
        ajaxSubmit() {
            // Do ajax
        }
    }
}
</script>

제 HTML에는 다음과 같은 것이 있습니다.

<ajax-form action="http://example.com/do/something">
    <input name="first_name" type="text">
    <textarea name="about_you"></textarea>
</ajax-form>

이상적으로는 컴포넌트의 슬롯을 사용하여 컴포넌트에 배치되어 있는 모든 폼 요소를data.formDataVue 컴포넌트 인스턴스의 속성.그래서 이 경우,data속성은 다음과 같습니다.

data: {
    formData: {
        first_name: '',
        about: ''
    }
}

HTML의 컴포넌트에 다른 필드를 추가하면 Vue 인스턴스의 컴포넌트에도 매핑됩니다.data소유물.

제가 이걸 할 수 있는 방법이 있을까요?슬롯을 통해 폼 요소를 컴포넌트에 넣을 때 이 요소를 컴포넌트 내의 다른 요소에 매핑할 수 있는 방법이 있습니까?data?

추가해 보았습니다.v-model그리고.v-bind각 폼 요소의 데이터를 컴포넌트의 데이터로 전달할 수 있는지 확인합니다.

<ajax-form action="http://example.com/do/something">
    <input name="first_name" type="text" v-model="formData.first_name">
</ajax-form>

그러나 Vue는 비활성 데이터 속성을 템플릿에서 사용하기 전에 선언해야 한다고 불평합니다.

[Vue warn] :속성 또는 메서드 "formData"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.

이것은 scopedSlots로 실행할 수 있습니다.

api는 다음과 같습니다.

<ajax-form action="http://example.com/do/something">
   <template scope="{formData}">    
   <input name="first_name" type="text" v-model="formData.first_name">
   </template>
</ajax-form>

그리고 그 안에ajax-form컴포넌트:

<form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
   <slot :formData="formData">
</form>

슬롯 범위는 상위 범위로 제한되어 있기 때문에 원하는 작업을 수행할 수 없습니다.

이제 상위 범위에서 액세스할 수 있도록 글로벌 Vue 인스턴스에서 formData를 정의할 수 있습니다.

const app = new Vue({
    el: '#app',
    data: {
        formData : {}
    }
});

이제 소품으로 폼에 전달할 수 있습니다.

<ajax-form action="#" :form-data="formData>
    <input name="first_name" type="text" v-model="formData.first_name">
</ajax-form>

다음과 같이 데이터를 부모에서 자식에게 매개 변수로 전달할 수 있습니다.

부모:

<child-component ref="child">
      <h1 slot="heading">Test passing data to child</h1>
      <form slot="content">
          <input type="text" v-model="name" placeholder="Type your name" class="half">
          <input type="text" v-model="email" placeholder="Type your email" class="half">
          <div class="actions">
              <button data-role="submit" @click.prevent="callAddRep($event)">Add</button>
          </div>
      </form>
</child-component>

data() {
    return {
        name: '',
        email: ''
    }
},
methods: {
    callAddRep: function(e) {

      let name = this.name,
          email = this.email

      this.$refs.child.addRep(e, {
          name,
          email
      })
  }

자녀:

methods: {
      addRep: function(e, data) {

          //Data passed successfully
          console.log(data)

      }
  }

@blockhead의 답변은 맞지만, ajax-form에 삽입된 슬롯이 템플릿 태그를 가진 단일 파일 컴포넌트인지 여부는 중요하지 않습니다.슬롯 속성을 가로채기 위해서는 그 컴포넌트를 외부 템플릿태그로 랩하여 속성으로 실제 타깃컴포넌트에 전달해야 합니다.

<modal-two modal_id="notif-modal">

    <template #default="{id_for_children}">

        <notification-alert :parent_modal_name="id_for_children" />
    </template>
</modal-two>

이건 어디서도 본 적이 없어

언급URL : https://stackoverflow.com/questions/42413704/vue-js-pass-data-from-slot-into-component-instance