Vue.jsを始めたばかりですが、propsについて分からないことがあるのでご教授ください。
##前提
Atomic Designの勉強で簡単な画面を作りたいと思っています。
まず、Atomsとしてinput部品を作りました。
vue
1// BaseInput.vue 2<template> 3 <input class="base_input" :type="type" name="" value=""> 4</template> 5 6<script> 7 export default { 8 data () { 9 return {} 10 }, 11 props: { 12 type: String, 13 } 14 } 15</script>
次に、moleculesとしてBaseInputを取り込みます。
vue
1// FormLogin.vue 2<template> 3 <div> 4 <base-input :type="type" :maxlength="maxlength" /> 5 </div> 6</template> 7 8<script> 9 import BaseInput from '../atoms/BaseInput.vue'; 10 11 export default { 12 data () { 13 return { 14 type: 'text', 15 maxlength: '150' 16 } 17 }, 18 components: { 19 'base-input': BaseInput 20 } 21 } 22 </script>
この結果、以下のようなhtmlが出来上がりました。
Html
1<input data-v-45bf9541="" data-v-2427d580="" type="text" name="" value="" class="base_input" maxlength="150">
##質問
作成されたhtmlの「type="text"」と「maxlength="150"」についてですが、
「:type="type"」の「"type"」がdata()の値('text')に、「:maxlength="maxlength"」」の「"maxlength"」がdata()の値('150')に変換されるのは理解できました。
ですが、BaseInput.vueのpropsを記述している意味が理解できないです。
BaseInput.vueは以下のようでもいいのではないかと思っています。
(inputタグだけになってしまいましたが…)
vue
1// BaseInput.vue 2<template> 3 <input class="base_input"> 4</template> 5 6<script> 7 export default { 8 data () { 9 return {} 10 }, 11 props: { 12 } 13 } 14</script>
maxlengthのように、FormLogin.vueのdata()で設定しても値は変換されるのに
なぜ、BaseInput.vueのpropsで設定しているのか。
ここで設定する意味が知りたいです。
どのようなことが出来るようになるのか、をです。
簡単な使い方があれば嬉しいです。
ちなみにこれらのソースはどこかのサイトに載っていた例文を参考にしました。
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/26 13:55