props ~親コンポーネントから子へデータを渡す~

親コンポーネント側

子のtotal-number属性として値を渡す

<Child :total-number="number"></Child> // Child.vueに渡す

export default {
    data() {
        return {
            number: 10
        }
    }
}

子コンポーネント（Child.vue）側

totalNumberとして受け取る

<p>{{ totalNumber }}

export default {
    props: {                             
        'totalNumber': {
            type: String,　　　// バリデーションとして型を指定
            required: false,　　// 必ず必要な値か
            default: 0　　　　// 親からの値がないときのデフォルト値
    }
}
// dataと同様に参照できる

HTMLで使われる文字はケバブケースで
javascriptで使われる文字は基本キャメルケースで

propsの値を子側で変えるとき

子コンポーネントで親からpropsで渡された値を変えても親側には影響しない（子から値を渡すことにはならない）
ただし、配列とオブジェクトは参照渡しになるので親に影響する