vue中v-model

v-model

<input type="text" v-model="msg">
    <p>{{msg}}</p>
    
    data() {
        return {
            msg: 'Hello World!'
        }
    }
複製代碼

v-model實質爲語法糖

語法糖：指計算機語言中添加的某種語法，這種語法對語言的功能並無影響，可是更方便程序員使用。一般來講使用語法糖可以增長程序的可讀性，從而減小程序代碼出錯的機會。

v-bind:value + v-on:input實現v-model

<input type="text" :value="doMsg" @input="doMsgFun($event)"/>
    <p>{{doMsg}}</p>
    
    data() {
        return {
            doMsg: 'Hello World!'
        }
    }
    
    methods: {
        doMsgFun() {
            this.doMsg = event.target.value;
        }
    }
複製代碼

或

<input type="text" :value="doMsg" @input="doMsg = $event.target.value"/>
    
    data() {
        return {
            doMsg: 'Hello World!'
        }
    }
複製代碼

組件中使用時

<!-- 父組件 -->
    <child @chindInput="getChildValue" :childMsg="childMsg"></child>
    或
    <!-- arguments是組件child裏面$emit傳出的值，全部的參數都會放到arguments裏面，因此把獲取到的auguments[0]賦值給childMsg -->
    <child @chindInput="childMsg=arguments[0]" :childMsg="childMsg"></child>
    
    data() {
        return {
            childMsg: 'childMsg！'
        }
    },
    methods: {
        getChildValue(value) {
            this.childMsg = value;
        }
    }
複製代碼

<!-- 子組件 child.vue -->
    <input type="text" @input="handleInput" :value="childMsg"/>
    
    props: {
        childMsg: String
    },
    methods: {
        handleInput (e) {
            this.$emit('chindInput', e.target.value)
        }
    }
複製代碼