專案中沒怎麼用過父子通訊，很多頁面都是路由切換實現的，後來做首頁的時候發現首頁的路徑沒法配置，我強行在原先的首頁上寫了個子元件，通過判斷路徑使其強行跳轉實現的

這個時候跳轉頁面的時候就要使用到了父子間的通訊問題了，首頁點選詳情，跳轉詳情頁需要攜帶主播id。之前的做法是跳轉的時候攜帶引數（$router.push()方法），子元件顯然不能這樣用。

參考。看程式碼：

使用新腳手架舉例：

父傳值給子

helloworld.vue中

<template>    
　　　<section>

       <!-- 路由跳轉時$router.push()中可攜帶引數 (router/index.js中配置好路徑即可)-->
       <router-link to="/child">路由跳轉</router-link>

       <!-- 父子元件傳值使用自定義事件監聽data值-->
       <childCom :message='passData'></childCom>

    </setion>
</template>
<script>
　　import childCom from '@/components/childComponent'
　　export default {
　　　　data () {
　　　　　　return {
　　　　　　　　passData: 'this is parent's data !'
　　　　　　}
　　　　}
   }
</script>

子元件childComponent.vue:

<template>
  <h4>這裡是子元件</h4>
</template>
<script>
  export default {
    props: ['message'], // 接收父元件中的值
    data () {
      return {}
    },
    created() {
      console.log(this.message) // this is parent's data ！
    }
  }
</script>

子元件傳值到父元件（不能直接改變父元件中的值）

childComponent.vue

<template>
    <button @click="changeData"></button> // 點選事件觸發
</template>
<script>
export default {
    data () {
        return {
            msg: 'This is child's component'
        }
    },
    methods: {
        changeData () {
             this.$emit(
 
'passMyData', this.msg) // emit觸發自定義事件
        }
    }
}
</script>            

helloworld.vue

<childCom @passMyData="getData"></childCom> // 監聽自定義事件，子元件觸發之後，觸發getData事件

methods: {
    getData (val) {
         console.log(val) // This is child's component 傳值成功
    } 
}