父元件Home.vue

 1 <template>
 2    <div>
 3 <h2>這是一個首頁{{msg2}}</h2><button>按鈕</button>
 4 <v-header :title="title"></v-header><!--子元件並接收傳值-->
 5 </div> 
 6 </template>
 7 
 8 <script>
 9 import Header from './Header.vue';//引入子元件
10 
11 export default
 
 {
12   data() {
13     return {
14       msg2: "我是一個方法",
15       title:'我是父元件home裡面的data-title' //要傳的值
16     }
17   },
18   components:{
19       'v-header':Header//註冊子元件
20   }
21 }
22 </script>

子元件Header.vue

<template>
   <div> <h2>我是header---{{title}}</h2></div> <!--title的值來自於父元件-->
</template>

<script>
export 
 
default {
data(){
    msg:'msgg'
},
methods:{

},
props:['title']//接受父元件傳過來的值
}
</script>

<style>

</style>