父元件寫好需要接受的值和方法，使用:title="title"傳title屬性值給子元件， :go="go"傳遞go方法

<template>
  <div id="root">
    <!-- 3.引用元件 -->
    <v-header :title="title" :go="go"></v-header>
  </div>
</template>

<script>
// 1.引入元件
import Header from "./components/Header.vue"
export default {
  //2.註冊元件
  components:{
    'v-header': Header
  },
  data(){
    return{
     title:"首頁"
    }
  },
  methods:{
    go(){
      alert("this is home")
    }
  }
}
</script>
 

子元件通過props接受父元件傳過來的title值和go方法

<template>
    <div class="header">
        {{title}}
        <button class="button" @click="go()">點我</button>
    </div>
</template>

<script>
export default {
    props:['title',"go"]
}
</script>