v-model 原理及使用

v-model

好好學習，天天向下！

這裏我只說一下在腳手架裏如何自定義雙向綁定

一、父組件

① 接收子組件傳遞來的值 @input="input"
② 用於修改向子組件傳遞的屬性 :value="value"

<template>
    <model @input="input" :value="value"></model>
</template>

<script>
  import Model from "./model";

  export default {
    name: "login",
    components: {Model},
    data() {
      return { value: ""}
    },
    methods: {
      input(val) {
        this.value = val;
      }
    }
  }
</script>

二、子組件

① 接受父元素傳來的屬性值 :value="value"—props: { value: [String, Number, Array, Object] },
② 將發生改變後的值傳遞給父元素 @input="change" —change(val) { this.$emit("input", val); } —watch: { value(val) { this.change(val); } }

<template>
  <el-input :value="value" @input="change"></el-input>
</template>

<script>
  export default {
    name: "model",
    props: {
      value: [String, Number, Array, Object]
    },
    methods: {
      change(val) {
        this.$emit("input", val);
      }
    },
    watch: {
      value(val) {
        this.change(val);
      }
    }
  }
</script>

注意： 之所以要把改變後的值傳遞給父組件，因爲他本來就是父組件傳遞過來的屬性，如果在子組件中進行修改他的話就會產生錯誤 該屬性不可修改，所以我們要把值給父組件，讓他來替我們修改這個值就行了