🖥

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

2023/09/01に公開

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 ではデフォルトの文字列が表示される

image

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3099

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2020-04-30

Discussion