Vue專案中經常使用到元件之間的數值傳遞，實現的方法很多，但是原理基本上大同小異。
子元件向父元件出傳遞資料，使用自定義事件的方式。
父元件向子元件傳遞資料，使用props屬性的方式。

一、實現思路

之前寫過兩篇文章，分別介紹了父子元件之前如何單向傳遞資料，如果你對單向傳遞資料不熟悉，可以參考著兩篇文章：

• Vue筆記——父元件向子元件傳遞資料
• Vue筆記——子元件向父元件傳遞資料

如果我們明確瞭如何在父子元件之間單向傳遞資料，那麼在這個基礎之上，我們就可以實現資料的雙向繫結。

比如父元件向子元件傳遞了一個數據，子元件接收到這個資料之後，儲存到自己的變數中。如果子元件中修改了這個變數，再通過觸發自定義事件，將這個資料傳遞給父元件。父元件接收到這個資料之後，儲存到自己對應的變數中。

這樣就實現父子元件的雙向資料繫結，如果父元件中改變了這個資料，那麼子元件中會實時修改對應的資料；如果子元件中改變了這個資料，父元件中也會實時修改對應的資料。

二、具體實現

1.子元件程式碼：

<template>
  <div class="Child">
    <h1>{{ val }}</h1>
    <!-- 子元件中可以修改value數值 -->
    子元件：<input type="text" v-model="value">
  </div>
</template>

<
 
script>
  export default {
    name: 'Child',
    // 在props屬性裡接收父元件傳遞過來的資料
    props: ["val"],
    data: function () {
      return {
        value: this.val    // 接收父元件傳遞過來的資料，儲存到變數中
      }
    },
    // 一旦value數值發生改變，子元件觸發自定義事件changeValue，將資料傳遞到父元件
    watch: {
      value: function () {
        console.
 
log(666);
        this.$emit('changeValue', this.value)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2.父元件程式碼：

<template>
  <div id="app">
    <!-- 使用v-bind命令將父元件中的資料繫結到子元件上 -->
    <Child v-bind:val="value" v-on:changeValue="receiveValue"></Child>
    <!-- 父元件資料繫結，可以修改value的數值 -->
    父元件：<input type="text" v-model="value">
  </div>
</template>

<script>
  import Child from './components/Child.vue'

  export default {
    name: 'App',
    components: {
      Child
    },
    data: function () {
      return {
        value: "初始化資料",
      }
    },
    methods:{
      // 子元件觸發changeValue事件，呼叫此方法，將子元件中的資料傳遞到父元件中
      receiveValue:function(receive){
        this.value = receive;
      }
    }
  }
</script>

<style>

</style>