v-model實現父子組件雙向綁定

官網地址：https://cn.vuejs.org/v2/api/#model

一、API

　　model: { prop?: string, event?: string }

二、實現

// 父組件
<template>
  <div id="app">
　　 // 使用 input 組件,使用 v-model
    <sp-input v-model="value"></sp-input>
    <button @click="Console">顯示value</button>
  </div>
</template>

<script>
import input from "../src/components/input";
export default {
  name: "App",
  data() {
    return {
      // 定義 input 需要的 value屬性
      value: ''
    };
  },
  components: {
    "sp-input": input
  },
  methods: {
    Console() {
      console.log(this.value)
      alert(this.value);
    }
  }
};
</script>

//子組件
<template>
  <div>
    // 封裝 input 標簽,v-model綁定computed屬性
    <input type="text" v-model="InputValue" /
  </div>
</template>

<script>
export default {
  name: "sp-input",
  // 定義model屬性
  model: {
　　 // prop即 父組件使用 v-model 綁定的屬性,這個名稱是自定義的
    prop: "value",
    // event即 子組件會向父組件觸發的事件,父組件的 v-model可以監聽到這個事件,並將vlaue賦值給v-model綁定的屬性
    event: "input"
  },
  props: {
    // 這里的 prop 定義必須與 model中定義的 prop 同名
    value: String
  },
  computed: {
    // 定義一個計算屬性,給子組件的 v-model使用
    InputValue: {
      // 計算屬性的 get 返回父組件傳入的 value,即model,props中定義的 prop
      get() {
        return this.value;
      },
      set(value) {
        //向父組件觸發事件,此事件為model中定義的event,子組件v-model綁定了該計算屬性,輸入時會觸發計算屬性的set方法,即向父組件觸發該事件
        this.$emit("input", value);
      }
    }
  }
};
</script>

三、注意事項

• 除了使用computed屬性之外，還可以使用 @input 去觸發事件。
• 重點為組件的 model屬性

 

謙良恭卑，信誠實至；生活不易，共勉同求。