부모에게 소품을 전달하고 자녀가 부모에게 이벤트를 내 보냅니다. 그러나 이것은 완전히 작동하지 않으며 나는 왜 확실하지 않다. 어떤 제안?(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에 대한 정의를 얻고있다. 내가 뭘 놓치고 있니?
안녕하세요. Aulet.위에서 말한 것은 완벽하게 이해할 수 있으며 코드를 수정했습니다. 그러나, 나는 여전히 부모로부터 자식에게 prop 값을 전달할 수 없다 (점점 ** undefined **). 업데이트 된 코드를 게시하면 도움이 될까요? – Manu
네, 커뮤니티를위한 더 나은 도움을 받으려면 코드를 업데이트하십시오! 하지만 먼저 구성 요소 간의 상위 - 하위 통신 (double data binding, props, events 등)에 대해 조금 읽으려고 시도해보십시오. –