2017-11-02 11 views
0

부모에게 소품을 전달하고 자녀가 부모에게 이벤트를 내 보냅니다. 그러나 이것은 완전히 작동하지 않으며 나는 왜 확실하지 않다. 어떤 제안?(VueJS) 하위 구성 요소의 상위 데이터를 업데이트하십시오.

부모 :

<template> 
<div class="natural-language"> 
    <div class="natural-language-content"> 
     <p class="natural-language-results"> 
      <msm-select :options="payments" :model="isShowingUpdate" /> 
     </p> 
    </div> 
</div> 
</template> 

<script> 
import msmSelect from '../form/dropdown.vue' 

export default { 
    components: { 
     'msm-select': msmSelect 
    }, 
    data() { 
     return { 
      isShowingUpdate: true, 
      payments: [ 
       {'value': 'paying anuualy', 'text': 'paying anuualy'}, 
       {'value': 'paying monthly', 'text': 'paying monthly'} 
      ], 
     } 
    } 
} 
</script> 

아이 다음 선택 상자 변화 옵션, 부울 플래그를 업데이트해야

기본적으로
<template> 
<div class="form-pseudo-select"> 
    <select :model="flagValue" @change="onChange($event.target.value)"> 
     <option disabled value='Please select'>Please select</option> 
     <option v-for="(option, index) in options" :value="option.value">{{ option.text }}</option> 
    </select> 
</div> 
</template> 

<script> 
export default { 
    props: { 
     options: { 
      elType: Array 
     }, 
     isShowingUpdate: { 
      type: Boolean 
     } 
    }, 
    data() { 
     return { 
      selected: '', 
      flagValue: false 
     } 
    }, 
    methods: { 
     onChange(value) { 
      if (this.selected !== value) { 
       this.flagValue = true; 
      } else { 
       this.flagValue = false; 
      } 
     } 
    }, 
    watch: { 
     'flagValue': function() { 
      console.log('it changed'); 
      this.$emit('select', this.flagValue); 
     } 
    }, 
    created() { 
     console.log(this.flagValue); 
     this.flagValue = this.isShowingUpdate; 
    } 
} 
</script> 

. 그러나, 내 아이가 isShowingUpdate에 대한 정의를 얻고있다. 내가 뭘 놓치고 있니?

답변

2

두 구성 요소간에 말한 관계가 없습니다.

parent라고하는 구성 요소는 실제로 아동이 ...이고 아동은 parent입니다.

부모 구성 요소는 항상 귀하의 경우, 다른 호출 하나입니다

//Parent component 
<template> 
... 
    <msm-select :options="policies" :model="isShowingUpdate" /> << the child 
... 
</template> 

당신은 소품을 변경해야합니다/두 개의 구성 요소 사이의 이벤트.

편집 :

당신은 편집 할 수 있습니다

onChange(value) { 
      if (this.selected !== value) { 
       this.flagValue = true; 
      } else { 
       this.flagValue = false; 
      } 
     } 

을 다음과 같은 새로운 사람 : 아이들에

:

onChange(value) { 
      if (this.selected !== value) { 
       this.flagValue = true; 
      } else { 
       this.flagValue = false; 
      } 
      this.$emit('flagChanged', this.flagValue) 
     } 

부모에 캡쳐 할 emit 이벤트를 사용하십시오.

//HTML part: 
    <msm-select :options="payments" :model="isShowingUpdate" v-on:flagChanged="actionFlagChanged" /> 

//JS part: 
    methods: { 
     actionFlagChanged() { 
      //what you want 
     } 
    } 

내가 당신에게 tips를 줄 수 : e와는 다른 메소드를 호출? 그것은 함수의 (매우) 좋은 이름이라는 사람이 아니다

  • : onChange OnChange 이벤트 내부 ... 같은 것을 시도하십시오 (더 의미) updateFlag을.

  • 난 당신이 시계 부분을 삭제할 수 있다고 생각하고 상위/하위 통신에 대한 자세한 내용을 배울 수있는 좋은 문서/튜토리얼 (즉 공식 문서를) 찾을 onchange를 이벤트에

  • 시도를 해.

이벤트 버스 수입을 추가해야합니다 :

import { EventBus } from './event-bus' 

는 희망이 도움이!

+0

안녕하세요. Aulet.위에서 말한 것은 완벽하게 이해할 수 있으며 코드를 수정했습니다. 그러나, 나는 여전히 부모로부터 자식에게 prop 값을 전달할 수 없다 (점점 ** undefined **). 업데이트 된 코드를 게시하면 도움이 될까요? – Manu

+1

네, 커뮤니티를위한 더 나은 도움을 받으려면 코드를 업데이트하십시오! 하지만 먼저 구성 요소 간의 상위 - 하위 통신 (double data binding, props, events 등)에 대해 조금 읽으려고 시도해보십시오. –

관련 문제