Vue 이벤트 핸들러 용 조합 함수

Question

Vue 2.0, ES6, Webpack을 사용하고 있습니다.

하나의 구성 요소 (하나의 구성 요소는 Parent이라고하자)와 몇 개의 하위 구성 요소 (각각 text-input이라고 부름)가 있습니다. 모든 text-input은 change이라는 이벤트를 내보내고 각 이벤트는 Parent 내에서 하나의 다른 속성을 변경해야합니다. 이제 Parent 말을하자 info 내가 가지고 info 내부, 이름, 이메일을 명명 된 데이터 등이있다

내가 달성하고자하는 (이름, 이메일, ...)에 대한 동일한 기능을 사용하여 올바른 속성을 설정하는 것입니다 내 @change 옵션.

<text-input 
    @change="alterProperty('name')"> 
</text-input> 
<text-input 
    @change="alterProperty('email')"> 
</text-input> 

내 Parent이 방법 것 :

alterProperty (property) { 
    return (changeValue) => { 
    this.info[property] = changeValue 
    } 
} 

것은 지금까지 아무것도, 나는이 뷰가 일을 처리하는 방식에, 어쩌면 뭔가를 작동시킬 수 없다, 나도 몰라합니다. 누구든지 그것에 대해 알고 있다면 도움을 주셔서 감사합니다.

감사

Answer 1

이 jsFiddle 예를 확인하시기 바랍니다 : 예상대로 https://jsfiddle.net/mani04/2mmbsyy3/

그것은 정확하게 작동합니다. 여기에 내가 text-input 구성 요소를 사용하고 방법은 다음과 같습니다

<text-input :value="userInfo.name" @change="alterProperty('name', $event)"></text-input> 

참고 :alterProperty 직접 @change 이벤트 핸들러에서 호출되는 인라인 방법입니다. 따라서 기본 값인 $event 매개 변수는 포함하지 않는 한 하위 구성 요소에서 인수를 전달하는 특수 변수가 아닙니다. 코드에서 이것은 누락 된 부분입니다.

참조 : 샘플 jsFiddle 구현에서

https://vuejs.org/guide/events.html#Methods-in-Inline-Handlers의 $event이 하위 구성 요소가 아닌 DOM event 만 이벤트 인수입니다. 다음과 같이 (상위 성분) 내 alterProperty 방법 작동 :

는

alterProperty: function(propToChange, newValue) { 
    this.userInfo[propToChange] = newValue; 
} 

jsFiddle는 예상대로 수정 된 도착 부모 컴포넌트의 객체를 출력한다.

편집 :

아이 컴포넌트는 사용자의 input 요소에 직접 this.value 결합하지 말아야 추가 정보, this.value 등의 소품을 통해 전달됩니다.

이

[뷰는 경고] :

는 것을 방지하려면 ... 직접 소품을 돌연변이 피, 내가 사용하고 당신이 그렇게하려고하면 같은 콘솔 오류 님에게 메일을 얻을 것이다 로컬 계산 된 속성 - textFieldValue. getter 및 setter 메서드가 있습니다.getter는 단순히 this.value을 반환하지만 setter는 change 이벤트를 부모 구성 요소로 보냅니다. this.value은 소품을 통과하지 않았습니다.

Answer 2

나는 효과적인 2 개의 바이올린을 보관하고 있습니다. 한 가지 방법은 v-on, emitter를 사용하여 하위 구성 요소와 상위 구성 요소 간의 통신을 아카이브하는 것입니다. 한 가지 방법은 하위 구성 요소에서 상위 데이터를 직접 업데이트하는 것입니다.

나는 첫번째 방법을 추천한다.

확인 첫 번째, 사용 V-에, 에미 터 방식, https://jsfiddle.net/seaify/p8fh108j/

Vue.component('text-input', { 
    props: ["parent_field"], 
    template: ` 
     <input type="text" v-model="text"> 
    `, 
    data: function() { 
     return {text: ''} 
    }, 
    watch: { 
     text: function(value, old_value) { 
      this.$emit('update_parent', this.parent_field, value) 
     } 
    } 
}); 

Vue.component('my-app-form', { 
    template: ` 
     <div class="my-app-form"> 
      <div class="my-text-input"> 
       Name: <text-input parent_field="name" v-on:update_parent='update_self'></text-input> 
      </div> 
      <div class="my-text-input"> 
       Email: <text-input parent_field="email" v-on:update_parent='update_self'></text-input> 
      </div> 
      <div class="result">Result: name = {{name}}, email = {{email}}</div> 
     </div> 

     `, 
    methods: { 
     update_self: function(key, value) { 
     this[key] = value 
     } 
    }, 
    data: function() { 
     return { 
       name: "", 
       email: ""   
     } 
    }, 
}); 

new Vue({ 
    el: '#app', 
    template: ` 
     <div> 
      <my-app-form></my-app-form> 
     </div> 
    `, 
}); 

확인이 바이올린 예를 들어, 직접 통신하지 않고, 부모 구성 요소를 업데이트, 마니에 https://jsfiddle.net/seaify/jczowb54/10

Vue.component('text-input', { 
    props: ["parent_field"], 
    template: ` 
     <input type="text" v-model="text"> 
    `, 
    data: function() { 
     return {text: ''} 
    }, 
    watch: { 
     text: function(value, old_value) { 
      this.$parent[this.parent_field] = value 
     } 
    } 
}); 

Vue.component('my-app-form', { 
    template: ` 
     <div class="my-app-form"> 
      <div class="my-text-input"> 
       Name: <text-input parent_field="name"></text-input> 
      </div> 
      <div class="my-text-input"> 
       Email: <text-input parent_field="email" ></text-input> 
      </div> 
      <div class="result">Result: name = {{name}}, email = {{email}}</div> 
     </div> 

     `, 
    data: function() { 
     return { 
       name: "", 
       email: ""   
     } 
    }, 
}); 

new Vue({ 
    el: '#app', 
    template: ` 
     <div> 
      <my-app-form></my-app-form> 
     </div> 
    ` 
}); 

감사합니다, 나는 당신의 바이올린을 포크하고 코드를 업데이트했다.