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

前言

父傳子

由父組件向子組件傳遞數據，咱們須要如下的幾個步驟

1. 引入子組件，而且掛載

import Child from './Child'
//components屬性中掛載
components:{
    Child
}

2. 將子組件做爲標籤名，並向子組件傳遞數據

<Child message="向子組件傳遞的消息"></Child>

3. 子組件使用props接收，父組件傳遞的數據

props:["message"],
   data(){
       return {
           msg:this.message
       }
   }

子傳父

父子傳遞「雙向綁定」

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

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的值賦值到本身的變量，修改本身的變量是能夠的。

子組件 - 修改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方法，在子組件中添加wacth方法，監聽兩個屬性的變化

父組件動態改變子組件的值
使用父組件傳遞的變量做爲方法名，以下
父組件傳遞的變量名爲fatherText,因此watch的方法名也爲 fatherText(newText),以此來達到監聽的效果
其中newText爲父組件改變後的新值（能夠自定義其餘變量名），咱們能夠直接調用。而後將新值賦值給子組件的變量，從而完成子組件變量的更新

子組件動態改變父組件的值
若是想使子組件中變量更新，父組件也同時更新。一樣，須要監聽子組件的變量變量，以子組件的變量名爲方法名
使用$emit向父組件通訊，通知父組件變量改變。

<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);
    }
  }
};