vue中使用v-model完成組件間的通信

前言

父傳子

子傳父

父子傳遞“雙向綁定”

以上的兩種方法，都是實現的單向數組傳遞，那如何實現兩個組件之間的雙向傳遞呢？
即，在父組件中修改了值，子組件會立即更新。
在子組件中修改了值，父組件中立即更新。

vue中有一個很神奇的東西叫v-model，它可以完成我們的需求。

使用v-model過程中，父組件我們還是需要將子組件正常引入，只是傳值方式改成了v-model

父組件

<template>
  <div>
    {{fatherText}}
    <Child v-model="fatherText"></Child>//調用子組件，並將 fatherText傳遞給子組件
    <button @click="changeChild">changeChildButton</button>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "father",
  data() {
    return {
      fatherText: "i'm fathertext"
    };
  },
  components: {
    Child
  },
  methods: {
    changeChild() {
      this.fatherText = "father change the text";
    }
  }
};
</script>

子組件

<template>
  <div>
   <p class="child" @click="change">{{fatherText}}</p>//正常使用fatherText的值，並添加一個修改值 的方法
  </div>
</template>
<script>
export default {
  name: "child",
  model: {//添加了model方法，用於接收v-model傳遞的參數
    prop: "fatherText", //父組件中變量的傳遞
    event: "changeChild" //事件傳遞
  },
  props: {
    fatherText: {//正常使用props接收fatherText的值
      type: String
    }
  },
  data() {
    return {
     
    };
  },
  methods: {
      change(){
          this.fatherText = 'son change the text'
      }
  }
};
</script>

在這裏，報了一個錯誤，這是因爲數據流是單向的，但是我們在這裏，子組件不應該直接修改props裏的值。
這裏不能直接修改，所以我們需要迂迴着修改，在子組件中定義一個自己的變量，再將props的值賦值到自己的變量，修改自己的變量是可以的。

子組件 - 修改props中的值

<template>
  <div>
    <p class="child" @click="change">{{childText}}</p>
  </div>
</template>
<script>
export default {
  name: "child",
    model: {
    prop: "fatherText", //父組件中變量的傳遞
    event: "changeChild" //事件傳遞
  },
  props: {
    fatherText: {
      type: String
    }
  },
  data() {
    return {
      childText: this.fatherText //定義自己的變量childText
    };
  },
  methods: {
    change() {
      this.childText = "son change the test";//修改自己的變量
    }
  }
};

兩個組件間更新
完成了上述代碼，你會發現兩個組件都改變的內容，但是隻更新了自身組件的內容，如何使兩個組件進行同步更新呢？

這裏需要使用我的Wath方法，來進行監聽傳遞組件的變量

<template>
  <div>
    <p class="child" @click="changeChild">{{childText}}</p>
  </div>
</template>
<script>
export default {
  name: "child",
  model: {
    prop: "fatherText", //父組件中變量的傳遞
    event: "changeChild" //事件傳遞
  },
  props: {
    fatherText: {
      type: String
    }
  },
  data() {
    return {
      childText: this.fatherText
    };
  },
  methods: {
    changeChild() {
      this.childText = "son change the test";
    }
  },
  watch: {
    fatherText(newtext) {//使用父組件中變量名爲函數名，監聽fatherText的變化，如果變化，則改變子組件中的值
      this.childText = newtext;
    },
    childText(newtext) {//監聽子組件中childText變化，如果變化，則通知父組件，進行更新
      this.$emit("changeChild", newtext);
    }
  }
};