Vue之自定義組件的v-model

 

 

v-model
還有一種數據的交互方式是使用 v-model， 這種方法專門是 input 組件， 這只不過是 一種語法糖的形式：
input 組件上面本身有一個 onInput 事件。每當素輸入框內容發生發生的時候，就會觸發這個事件，然后把 input 的值 通過 $emit 傳遞出去。

<!-- 下面兩個表達 實現同樣的效果 -->
<input v-model='val'>
<input :value='val' @input="val = $event.target.value"/>

這里需要注意的是 v-model 默認情況下只會接受 value 屬性和響應 input 事件。 因為 v-model 本身是基於 input 框定制的， 
value 是 input 內部定制的綁定值的屬性， input 方法是內部定制的當值改變出發的事件。

 

定制 v-model

父組件

<template>
    <div>
        <p>vue 高級特性</p>
        <hr>

        <!-- 自定義 v-model -->
        <p>{{name}}</p>
        <CustomModel v-model="name"/>
        <!-- 等同於 -->
        <!-- <CustomModel :value="name"  @change1="name = $event"></CustomModel> -->
    </div>
</template>

<script>
import CustomModel from './CustomModel'
export default {
    data() {
        return {
            name:'小米'
        };
    },
    components:{
        CustomModel
    }

};
</script>

<style scoped lang="css">

</style>

 

子組件

<template>
    <!-- 例如：vue 顏色選擇 -->
    <input type="text"
        :value="text1" @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要對應起來
        3. text1 屬性對應起來
    -->
</template>

<script>
export default {
    model: { prop: 'text1', // 對應 props text1
        event: 'change1' },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

上面的例子通過在子組件內部定義 model 選項來改變 v-model 綁定屬性和響應的方法，

1. 當父組件點擊 打開model 按鈕的時候，內部的 name屬性傳遞到了子組件，子組件用props接收

2. 子組件修改關鍵字, 觸發了 change1 事件，並傳遞了一個參數給父組件
3. 父組件監聽到了change1事件，並賦值name屬性

這個過程在使用 $emit 和 v-on 時的邏輯，因為我們自定義了 model 屬性， 這時就可以在使用 子組件的時候就可以使用 v-model 來簡寫這種寫法啦。