引用官網的一句話：父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息

1.父元件像子元件進行傳值

父元件：

<template>
  <div class="hello">
    <child :inputValue = 'value'></child>
  </div>
</template>
<script>
import child from './child'
export default {
  data () {
    return {
      value:'我是父元件的value'
    }
  },
  components:{child}
}
</script>
 

子元件：

    <template>
       <div>
          <span>{{inputValue}}</span>
       </div>
    </template>
    <script>
    export default {
       props:{
           inputValue:String
       }
    }

父元件向子元件傳值成功
總結一下：

• 子元件在props中建立一個屬性，用以接收父元件傳過來的值
• 父元件中註冊子元件
• 在子元件標籤中新增子元件props中建立的屬性
• 把需要傳給子元件的值賦給該屬性

2. 子元件向父元件傳值

1.在子元件中建立一個按鈕，給按鈕繫結一個點選事件

2.在響應該點選事件的函式中使用$emit來觸發一個自定義事件，並傳遞一個引數

<template>
    <div>
        <h3>child子元件部分</h3>
        <p>{{message}}</p>
        <button @click="sendTOParent">向父元件傳值</button>
    </div>
</template>
<script>
export default {
    props:['message'],
    data(){
        return{
            data:'this message from child'
        }
    },
    methods:{
        sendTOParent(){
            this.$emit('listenToChildEvent',this.data)
        }
    }
    
}
</script>
 

3.在父元件中的子標籤中監聽該自定義事件並新增一個響應該事件的處理方法

<template>
    <div>
        <son v-bind:message = 'parentMsg' v-on:listenToChildEvent = 'showMsgfromChild'></son>
    </div>
</template>
<script>
import son from './son'
export default {
    data(){
        return {
            parentMsg:'hello,child'
        }
    },
    methods:{
        showMsgfromChild(data){
            console.log(data)
        }
    },
    components:{son}

}
</script>

子元件向父元件傳值成功
總結一下：

• 子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件
• 將需要傳的值作為$emit的第二個引數，該值將作為實參傳給響應自定義事件的方法
• 在父元件中註冊子元件並在子元件標籤上繫結對自定義事件的監聽