Vue.js propsについて親コンポーネントから子コンポーネントの流れ

親コンポーネントから子コンポーネントにデータを受け取る場合はpropsを使い属性名を指定する必要がある。

//子コンポーネント
Vue.component('コンポーネント名',{
  template: '<p>私は{{name}}です。</p>',
  props: ['name']
})

//親コンポーネント
new Vue({
  el: '',
  data: {  
    list: [
    {id:1, name: '男子A'},
    {id:2, name: '男子B'},
    {id:3, name: '男子C'}      
  ]
 }
})

また、子側からpropsデータを使ってデータを渡したり、代入する事は出来ない。
propsのプロパティは親コンポーネントから借りているだけという考え方なので、 勝手に書き換える事は出来ない。

propsの受け取りデータ型を指定する方法

Vue.component('コンポーネント名'{
  props: {
     val:String //文字列型のみ許可する方法
 }
})