父組件Home.vue

 1 <template>
 2    <div>
 3 <h2>這是一個首頁{{msg2}}</h2><button>按鈕</button>
 4 <v-header :title="title" :homemsg=‘msg‘  run=‘run‘></v-header><!--子組件並接收傳值。兩個數據，一個方法。其中run方法不能加括號，加括號會執行方法-->
 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   },
    methods:{
   run(data){  //data為子組件傳過來的參數
alert(‘我是home父組件的run方法‘ +data); //傳方法。 +data是拼接數據
}
}
 
21 }
22 </script>

子組件Header.vue

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

<button @click:run(123)>調用父組件傳遞的方法</button><!--調用父組件傳遞的方法，如果不傳值寫@click:run()，如果傳值外面雙引號，裏面單引號@click:"run(‘123‘)"-->

</template>
 <script>
 export 
 
default { 
data(){
 msg:‘msgg‘ 
}, 

methods:{ },

props:[‘title‘，‘homemsg‘， ‘run‘]//接受父組件傳過來的值 } 

</script> 
<style> 
</style>

還可以把整個組件傳過去

vue 父組件給子組件傳值