vue的model选项和自定义组件的v-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">

上面的: 一个v-model等价于 一个属性:value和一个事件@input

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

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

从官网上看到，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
（1.父级v-model内部已经实现绑定不同的属性和绑定不同的事件接受子组件触发的事件，当自己写@input/@change 时会覆盖v-model内部的事件）

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

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

select使用value和change事件

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

// HTML部分
<div id="app">
    // 4.父组件的value值绑定到price
    <price-input :value="price" @input="onInput"></price-input>
</div>
// 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;
        }
    }
})

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

（2.子组件不知道父组件有默认的value和input事件，需要用model声明显式告诉子组件。在子组件中用props接收父组件传过来的，model{prop：父组件绑定的属性名，event：父组件抛出的事件}）

子组件中：
<template>
    <input type="text" :value="uname" @input="updateVal($event.target.value)">
</template>
Vue.component('my-input',{
    **重model: {
        prop: 'uname',       //代表父组件 :unmame="val"
        // 随便命名事件，对应下面$emit即可
        event: 'changeXXX'   //代表父组件 @changeXXX="actChange"
    },重**     //但是父组件只需要写  v-model="val"  就代表上面两个了
    props: {
        uname: {            //子组件接收父组件的传值
            type: String,
            default: 'tom'
        }
    },
    methods: {
        updateVal(val){
            this.$emit('changeXXX',val)
        }
    }
})

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

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

等价于

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

实现双向绑定的关键代码就是定义model属性中的prop和event，v-model中的值传递给model属性中的prop对应的变量。然后在自定义组件中选择一个要传递出去值的基本组件，通过$emit发送event事件并传递一个结果值，这样外部的v-model就收到了传出的值，因此就实现了双向传递。