父子组件可以利用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>

效果