vue的v-model和自定义组件的model vue

前言
【vue的v-model和自定义组件的model】vue-property-decorator,@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。
vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：

{{message}}

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

上面的: 一个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部分 // 4.父组件的value值绑定到price // js部分 Vue.component('custom-input',{ // 1.监听input,输入时触发自定义组件内部的updateVal事件 template: ``, // 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.在子组件中用props接收父组件传过来的value，model{prop：父组件绑定的属性名（自定义但和props中相同），event：父组件抛出的事件}）

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

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