一、父元件與子元件之間值傳遞步驟如下：

例如：我有一個父元件Myhome.vue 和一個子元件Header.vue

1、父元件呼叫子元件的時候，動態繫結屬性值

 <v-myheader :title="title"></v-myheader> 

2、在子元件使用 props 來接受父元件傳過來資料（props:['title']），如果是多個就定義多個屬性就可以

完整程式碼如下：

1、Myhome.vue(父元件)程式碼如下：

<template>
<div id="homeapp">
<h1>這是一個home123</h1>
 <v-myheader :title="title"></v-myheader> 
 </div>
</template>

<script>
import MyHeader from 
 
'./Header.vue';
export default {
   name:'myhome',
    data () {
        return {
         title:'父類資料'
        }
    }
    ,components :{
        'v-myheader':MyHeader
    }

}
</script>

2、Header.vue（子元件）程式碼如下：

<template>
<div id="headerapp">
<h3>這是頭部元件（子元件）</h3>
<h2>父類資料--{{title}}</h2>
</div>
</template>

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

    }
    ,props:['title']
}

</script>

 2、除了傳遞屬性以外還能傳遞方法和父元件的物件，如果是傳遞父元件的物件，那麼在子元件裡就能通過父元件物件獲取屬性和方法、資料

程式碼如下：

父類元件程式碼如下：

<template>
<div id="homeapp">
<h1>這是一個home123</h1>
 <v-myheader :title="title" :show='show' :home="this"></v-myheader> 
 </div>
</template>

<script>
import MyHeader from 
 
'./Header.vue';
export default {
   name:'myhome',
    data () {
        return {
         title:'父類資料'
        }
    }
    ,methods:{
        show(a) {
            alert('我是父元件方法'+a);
        }
    }
    ,components :{
        'v-myheader':MyHeader
    }

}
</script>

其中:

:show='show'->表示傳遞方法
:home="this"->表示傳遞父類例項物件

子元件程式碼如下：

<template>
<div id="headerapp">
<h3>這是頭部元件（子元件）</h3>
<h2>父類資料--{{title}}</h2>
<button @click="show(123)">呼叫父類方法</button>
<button @click="getparentdata()">獲取父元件資料和方法</button>
</div>
</template>

<script>
export default {
    data() {
        return {
          msg:'mgs'
        }
    },methods:{
        getparentdata (){
            alert(this.home.title);
        }

    }
    ,props:['title','show','home']
}

</script>