Vue小白教程：props傳值

父子組件可以利用pros直接傳值，在子組件中定義props，並可規定傳值類型，當父組件使用子組件時傳入相應參數，即可把父組件的數值傳遞到子組件中。
本文內容還可對照參考本人博客Vue小白教程：組件傳值（一）

父組件App.vue

<template>
  <div id="app"> 
    {{msg}}
    <hellochange :msgchange=msgdata></hellochange>
  </div>
</template>

<script>
import HelloChange from './components/HelloChange.vue'

   export default {  
    components:{
        hellochange:HelloChange
    },   
      data () { 
        return {       
         msg:'你好vue',
         msgdata:'我是父組件傳值'
        }
      }     
    }
</script>

子組件HelloChange.vue

<template>
    <!-- 所有的內容要被根節點包含起來 -->
    <div id="hellochange">    
       {{msg}}
       <br>
       {{msgchange}}     
    </div>
</template>

<script>
    export default{
        data(){
            return {               
               msg:'我是一個home組件'             
            }
        },
        props:{
            msgchange:{
                type:String
            }
        }
    }
</script>

效果