小技紹介
props のバリデーション要素に function が使えることがわかって嬉しかった話
どういうこと？
例えば、日付を表示するだけのコンポーネントがあったとする
./src/Day.vue
<template>
<p class="day-font"> {{ date }}
</template>
<script>
export default {
data() {
return: {
date: 0
}
},
created() {
this.date = new Date().getDate()
}
}
</script>
./src/app.vue
<template>
<day />
</template>
<script>
import day import "./Day"
export default {
components: {
Day
}
}
</script>
こんな感じになる。
もう少しそれっぽく書くと
./src/Day.vue
<template>
<p> {{ day }}
</template>
<script>
export default {
props: {
date: {
type: Number,
required: true
}
}
}
</script>
./src/app.vue
<template>
<day :date="date" />
</template>
<script>
import day import "./Day"
export default {
components: {
Day
},
data() {
return: {
date: 0
}
},
created() {
this.date = new Date().getDate()
}
}
</script>
こんな感じになる。
props を渡さないといけない状態になる。
つまり、当日日付を親側で与えないといけないのである。
日付を司っているのは、Day コンポーネントで、
App コンポーネントは、日付を司っていない。
App が他に日付操作を行うのであれば、問題はないと思うが、単に Day コンポーネントを呼んで、
当日日付を表示したいだけ、であれば、 App コンポーネントで Date オブジェクトの操作を行うのは避けたい。
function を使って解決
./src/Day.vue
<template>
<p> {{ day }}
</template>
<script>
export default {
props: {
date: {
type: Number,
required: true
default: function() {
return new Date().getDate()
}
}
}
}
</script>
./src/app.vue
<template>
<day />
</template>
<script>
import day import "./Day"
export default {
components: {
Day
}
}
</script>
ずいぶんとスマートになったのではないだろうか。
「date は必須ではない、ただ何も定義しなかった場合、当日日付を返却する。」
という非常に使い勝手の良いコンポーネントに進化した。