vue的model选项

 

 

 

今天在看vue-property-decorator时，遇到了@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。

vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：

<input type="text" v-model="message">
<p>{{message}}</p>

v-model只是语法糖，真正的实现形式：

<input type="text" :value="message" @input="message = $event.target.value">

1.将输入框的值绑定到message变量上，这只是单向的，改变message的值可以改变input的value，但是改变input的输入不会改变message。

2.监听input事件，当输入类内容时改变message变量，从而实现了双向绑定。

从官网上看到，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text和textarea元素使用value属性和input事件

checkbox和radio使用checked属性和change事件

select使用value和change事件

那么我们知道原理后，可以试着实现自定义输入框组件的v-model，即双向绑定

// js部分
Vue.component('custom-input',{
    // 1.监听input,输入时触发自定义组件内部的updateVal事件
    template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,
    // 5.通过props传递，实现父组件值绑定到输入框的value
    props: ['value'],
    methods: {
        // 2.触发父组件上的input事件
        updateVal(val){
            this.$emit('input', val);
        }
    }
});

var app = new Vue({
    el: '#app',
    data(){
        price: ''
    },
    methods: {
        // 3.传递过来的值赋给父组件的price变量，实现了输入框到父元素的单向绑定
        onInput(val){
            this.price = val;
        }
    }
})

// HTML部分
<div id="app">
    // 4.父组件的value值绑定到price
    <price-input :value="price" @input="onInput"></price-input>
</div>

通过上面的分析，默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。

Vue.component('my-input',{
    model: {
        prop: 'uname',
        // 随便命名事件，对应下面$emit即可
        event: 'changeXXX'
    },
    props: {
        uname: {
            type: String,
            default: 'tom'
        }
    },
    methods: {
        updateVal(val){
            this.$emit('changeXXX',val)
        }
    }
})

<template>
    <input type="text" :value="uname" @input="updateVal($event.target.value)">
</template>

父组件内使用时，使用v-model就可以啦

// name是父组件中的属性
<my-input v-model="name" value="some value"></my-input>
<p>{{name}}</p>

等价于

<my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>