상위 구성 요소에서 하위 폼 데이터를 가져오는 VueJs

상위 구성 요소에서 하위 폼 데이터를 가져오는 VueJs

내 자식 구성 요소에 양식이 있어:

<form @submit="submitForm">
  <input type="text" v-model="textInput" />
</form>

export default {
  name: "childComp",
  data: function() {
    return {
     textInput: ""
    }
  }
}

이제 부모 구성 요소에서 버튼이 하나 있는데, 그 버튼을 클릭해서 아동양식 데이터를 가져와야 해.

<button type="button" @click="getFormData()"> click </button>

export default {
  name: "ParentComp",
  data: function() {
    return {
     formData: []
    }
  },
  methods: {
    getFormData(d) {
      formData.push(d);
      console.log(d)
    }
  }
}

도와줘서 고마워.

비록 당신이 그것을 사용함으로써 해결했음에도 불구하고$ref, 나는 a의 힘을 활용하는 것을 추천한다.v-model사용자 정의 구성요소에 구현.

이것은 좀 더 깨끗한 접근법이고, 이렇게 함으로써, 여러분은 그것을 사용하고 싶을 때 실제로 검색하는 대신, 항상 양식 데이터를 가까이에 두게 될 것이다.

다음과 같은 방법으로 할 수 있다.

부모

<button type="button" @click="getFormData()"> click </button>
<childComp v-model="formData" />

export default {
  name: "ParentComp",
  data: function() {
    return {
     formData: {}
    }
  },
  methods: {
    getFormData() {
      console.log(this.formData)
    }
  }
}

아이

<form>
  <input type="text" v-model="selected.text" />
</form>

export default {
  name: "childComp",
  props: ['value'],
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      } 
    }
  }
}

다음과 같은 방법으로 해결책을 찾았다.ref=""앞으로 얼마나 복잡해질지 확실하지 않다.

여기 내가 한 일이 있다.

My parent component:

<button type="button" @click="getFormData()"> click </button>
<childComp ref="childComp" />

export default {
  name: "ParentComp",
  data: function() {
    return {
     formData: []
    }
  },
  methods: {
    getFormData() {
      const data = this.$refs.childComp.submitForm()
      formData.push(data);
      console.log(data)
    }
  }
}

내 자식 구성 요소:

<form @submit="submitForm">
  <input type="text" v-model="textInput" />
</form>

export default {
  name: "childComp",
  data: function() {
    return {
     textInput: ""
    }
  },
  submitForm() {
    return this.form;
  }
}

참조URL: https://stackoverflow.com/questions/59276557/vuejs-getting-child-form-data-from-parent-component