Vuejs2에서 여러 하위 구성 요소의 입력을 얻는 방법은 무엇입니까?

Question

VueJs2를 사용하고 있습니다. 구성 요소 A는 두 개의 구성 요소 인 B와 C로 구성되며 제출 단추도 포함합니다. 각 하위 구성 요소에는 입력 요소가 있습니다. A의 제출 버튼을 클릭하면 B와 C의 입력을 받아서 게시물 요청으로 제출해야합니다.

"구성 요소 A는"

var A = { 
    components: { 
     'B', 
     'C', 
    }, 
    template: `<input type="button" value="submit" id="submit" v-on:click="submitMethod" />`, 
    methods: { 
     submitMethod: function() { 

     } 
    } 
} 

"구성 요소 B"

var B = { 
    template: `<input type="text" id="fname" v-model="fname" />`, 
    data: { 
     fname: '' 
    } 
} 

"구성 요소 C"

var C = { 
    template: `<input type="text" id="lname" v-model="lname" />`, 
    data: { 
     lname: '' 
    } 
} 

내가 어떻게 아치 수 있습니다 이봐, 이거?

Answer 1

귀하의 우려 사항을 이해합니다. 이 질문은 Vue 커뮤니티에서 잘 대답하지 않습니다. 당신이 React에서 왔을 때, 물론, 약간의 학습 곡선이 있지만 당신은 모든 모범 사례를 처음으로 알게됩니다.

이 경우에는 Vue, 내 구성 요소에 A에는 B 및 C의 입력에 대한 상태 (데이터)가 있습니다. 그런 다음 내 템플릿에서 나는 이와 같은 일을 할 것입니다.

<div> 
    <A :value="aValue" onChange="(value) => aValue = value"/> 
    <B :value="bValue" onChange="(value) => bValue = value"/> 
    <input type="button" value="submit" @click="myFucntion"/> 
</div> 

이제 모든 데이터가 최상위 (컨테이너) 구성 요소에 포함됩니다. 그러면 대부분의 구성 요소가 무국적이고 재사용 할 수 있습니다. 나는 이것이 좀 장황하다라고 생각하지만, 그럴만 한 가치가 있다고 생각한다.

Answer 2

이벤트 기반 접근 방식을 사용할 수 있습니다. 이것은 child to parent에서 데이터를 전달하는 더 우아한 방법이 될 것입니다. 여기에서 가져온

Vue.component('child', { 
 
    template: '#child', 
 
    
 
    //The child has a prop named 'value'. v-model will automatically bind to this prop 
 
    props: ['value'], 
 
    data: function() { 
 
    return { 
 
     internalValue: '' 
 
    } 
 
    }, 
 
    watch: { 
 
    'internalValue': function() { 
 
     // When the internal value changes, we $emit an event. Because this event is 
 
     // named 'input', v-model will automatically update the parent value 
 
     this.$emit('input', this.internalValue); 
 
    } 
 
    }, 
 
    created: function() { 
 
    // We initially sync the internalValue with the value passed in by the parent 
 
    this.internalValue = this.value; 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    inputs: {  
 
     value1: 'hello1', 
 
     value2: 'hello2' 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div id="app"> 
 
    <p>Parent value: {{inputs}}</p> 
 
    <child v-model="inputs.value1"></child> 
 
    <child v-model="inputs.value2"></child> 
 
</div> 
 

 
<template id="child"> 
 
    <input type="text" v-model="internalValue"> 
 
</template>

참조 : vuejs update parent data from child component 저자 :