Vue の props で、function を使って default の値を決める

小技紹介

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 は必須ではない、ただ何も定義しなかった場合、当日日付を返却する。」

という非常に使い勝手の良いコンポーネントに進化した。