🖥
#Vue 初心者向け – component の props にデフォルト値を設定する
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オープンチャットもご利用ください。
公開日時
2020-04-30
Discussion