🖥

#Vue 初心者向け – component の props にデフォルト値を設定する

2023/09/01に公開

tech

vue cli で作成したプロジェクト前提

css記述は省略

src/components/Foo.vue

呼び出される component

props でデフォルトの値を設定する
component の呼び出しで何も渡さない時にデフォルト値を利用したいので、 required は false にしておく

ちなみに型を定義するだけならこんな書き方だが

  props: {
    msg: String
  }

他にも属性を指定したい場合は、一段ネストして書く

  props: {
    msg: {
      type: String,
      default: 'Ya!',
      required: false
    }
  }

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Ya!',
      required: false
    }
  }
}
</script>

src/App.vue

component を呼び出すメインのっ処理
component を prpps の値の指定あり、値の指定なし、でそれぞれ呼び出す

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Foo/>
    <Foo msg="Wow"/>
    <Foo/>
  </div>
</template>

<script>
import Foo from './components/Foo.vue'

export default {
  name: 'App',
  components: {
    Foo
  }
}
</script>

表示例

props に値を与えた component ではその文字列が表示される
props に値を与えなかった component ではデフォルトの文字列が表示される

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter

https://twitter.com/YumaInaura

公開日時

2020-04-30