Vueのcomputed
プロパティのgetter
の役割についての質問です。
親コンポーネントと子コンポーネントの値の受け渡しについて調べておりますが、
getter
の役割がよく分かりません。
getter
部分をコメントアウトして実行すると、[Vue warn]: Getter is missing for computed property
が出ますが、入れても入れなくても同じ動きをします。
今回の例ですと、setter
でemit
するイメージは分かっているつもりですが、getter
は何をしているのか、getter
でreturn
されたthis.value
は、どこが受け取っているかが分からず、質問させていただきました。
以下、getterあり
とgetterなし
のgifになります。
該当のソースコード
【parent.vue】
vue
1<template> 2 <div class="container"> 3 <div> 4 <h2>入力フォーム</h2> 5 <span>ID</span> 6 <child v-model="input" /> 7 </div> 8 <div> 9 <h2>入力内容</h2> 10 <span>{{ input }}</span> 11 </div> 12 </div> 13</template> 14 15<script> 16import child from './child'; 17 18export default { 19 components: { 20 child, 21 }, 22 data() { 23 return { 24 input: '', 25 }; 26 }, 27}; 28</script>
【child.vue】
vue
1<template> 2 <input v-model="inputValue" type="text" /> 3</template> 4 5<script> 6export default { 7 props: { 8 value: { 9 type: String, 10 default: '', 11 }, 12 }, 13 computed: { 14 inputValue: { 15 set(value) { 16 // console.log('set通過'); 17 // console.log('value:' + value); 18 // console.log('this.value:' + this.value); 19 this.$emit('input', value); 20 }, 21 get() { 22 // console.log('get通過'); 23 // console.log('this.value:' + this.value); 24 return this.value; 25 }, 26 }, 27 }, 28}; 29</script>
何が分からないのか分からないので、参考までに何が起こっているのかだけ書いておきます。
この例ではchildコンポーネントのinputValueプロパティが算出プロパティとして定義されています。
算出プロパティにはgetterが必須ですが、inputValueプロパティには存在していないので警告が出ています。
またinputValueプロパティはテンプレート上ではinput要素のvalueに双方向バインド(v-model)されているので、input要素の内容がinputValueプロパティと連動しているということになります。
そしてinputValue算出プロパティにはあまり使用されないsetterがあるので、input要素の内容が変更される度にinputValue算出プロパティのsetterが呼ばれます。
setterの中では引数でinput要素の内容が入ってきて、これをinputイベントとしてemitしています。
childコンポーネントのinputイベントはparentコンポーネントが購読し、内容をparentコンポーネントのinputプロパティに設定している(v-modelの意味)ので、結果的にテンプレート上のspan要素の内容テキストにも反映されます。
つまり、childコンポーネントのinput要素の内容はinputイベント発行時にそのまま内容がparentコンポーネントのinputプロパティに設定されてるので、childコンポーネントのinput要素の初期表示を除きgetterが使用されていないということです。
ご参考までに。
不明瞭な質問の中で、ご丁寧に解説いただきありがとうございます。
setterとgetterの中に、console.log('set通過')といったコードを入れて実行すると、以下のようになりました。
ページアクセス時:getterのみ
テキスト入力時、setter→getter
今回の例ですと、setterでemitするイメージは分かっているつもりですが、getterは何をしているのか、getterでreturnされたthis.valueは、どこが受け取っているかが分からず、質問させていただきました。
変化のあったコンポーネントをレンダリングするときです。
今回のケースではchildコンポーネントでinputValueプロパティがテンプレート上のinput要素のvalueに双方向バインド(v-model)されていて、input要素に変化があった際にsetterが呼ばれます。
setterの中からこのコンポーネントinputイベントが発行されたため、それを購読しているparentコンポーネントのinputプロパティに反映されます。
ただinputプロパティに反映されると、双方向バインドなので、その値がchildにも反映され、レンダリングが発生し、結果としてgetterが呼ばれるということです。
parentコンポーネントのv-modelによるバインドは
v-bind:value="input"
v-on:input="input=$event"
に分解できるのですが、v-bindを消してあげればレンダリングは発生せず、getterも呼ばれません。
ご回答いただきありがとうございます。
細かく分解して説明いただいたおかげで、getterの挙動が分かってきました。
回答にご記入いただければ、ベストアンサーにさせていただきたいと思います!
回答2件
あなたの回答
tips
プレビュー