質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,747

score 22

Vue.jsを始めたばかりですが、propsについて分からないことがあるのでご教授ください。

前提

Atomic Designの勉強で簡単な画面を作りたいと思っています。
まず、Atomsとしてinput部品を作りました。

// BaseInput.vue
<template>
  <input class="base_input" :type="type" name="" value="">
</template>

<script>
  export default {
    data () {
      return {}
    },
    props: {
      type: String,
    }
  }
</script>

次に、moleculesとしてBaseInputを取り込みます。

// FormLogin.vue
<template>
  <div>
    <base-input :type="type" :maxlength="maxlength" />
  </div>
</template>

<script>
  import BaseInput from '../atoms/BaseInput.vue';

  export default {
    data () {
      return {
        type: 'text',
        maxlength: '150'
      }
    },
    components: {
      'base-input': BaseInput
    }
  }
  </script>

この結果、以下のようなhtmlが出来上がりました。

<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タグだけになってしまいましたが…)

// BaseInput.vue
<template>
  <input class="base_input">
</template>

<script>
  export default {
    data () {
      return {}
    },
    props: {
    }
  }
</script>

maxlengthのように、FormLogin.vueのdata()で設定しても値は変換されるのに
なぜ、BaseInput.vueのpropsで設定しているのか。
ここで設定する意味が知りたいです。
どのようなことが出来るようになるのか、をです。

簡単な使い方があれば嬉しいです。

ちなみにこれらのソースはどこかのサイトに載っていた例文を参考にしました。

どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

<template>
  <div>
    <input class="base_input" :type="type" :value="value">
  </div>
</template>

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

<template>
  <div>
      <input
        class="base_input"
        v-bind="$attrs"
        v-model="value"
      >
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: ['value']
}
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/26 22:55

    ご回答ありがとうございました!
    ルートタグに属性継承されるというのを全然理解していませんでした。
    同じ名前が付いてると、そちらに展開されるものだと勘違いしていました。
    まだまだ勉強不足です。
    `inheritAttrs: false` についても理解できました。
    どうもありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る