Vue.jsのpropsの使い方について

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件

ベストアンサー

テンプレートのルートタグに属性継承される仕様なので、この例ではpropsを設定する意味ないですね。

vue
1<template>
2  <div>
3    <input class="base_input" :type="type" :value="value">
4  </div>
5</template>

上記みたいに<input>タグがルートタグじゃない場合ならpropsが有効ですが、下記のようにinheritAttrs: falseでルートタグへの属性継承を無効化しv-bind="$attrs"で<input>タグに属性を継承させるという方法もあります。

vue
1<template>
2  <div>
3      <input
4        class="base_input"
5        v-bind="$attrs"
6        v-model="value"
7      >
8  </div>
9</template>
10
11<script>
12export default {
13  inheritAttrs: false,
14  props: ['value']
15}
16</script>