propsをオブジェクトで指定する

<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber></LikeNumber>
  <LikeNumber :total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>

<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: {
    totalNumber: {
      type: Number,
      default: 10
    }
  },
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.number += 1;
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>

  props: {
    totalNumber: {
      type: Number, /型の指定/
      default: 10   /うまくいいかない場合に取る値を設定/
    }

今回はにtotalNumberの属性指定がないのでdefault値１０が使用されている。

あとこれ以外に
required: trueもよく使われてこれについては親要素に属性を絶対指定しないといけなくなる。
＊defailtとは共存できない。
＊typeというのはバリデーションと呼ばれ意図しないエラーが怒らないように抑制をかけている