v-model只是一个语法糖
<input v-model="something">
只是一个语法糖
<input v-bind:value="someting" v-on:input="something = $event.target.value">
相当于
<custom-input v-bind:value="something" v-on:input="something = arguements[0]"></custom-input>
真正实现还是靠
- 接受一个
value
属性 - 在有新的
value
时触发input
事件
如何让v-model绑定的值接受到数据呢?
<div id="app>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
methods:{
......
//通过input事件发出数值
this.$emit('input', Number(formattedValue))
}
})
</script>
也就是自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以)
然后,给原生控件绑定事件,捕捉到原生组件的值,利用 $emit
方法,触发input
方法,组件监听到input
事件然后把值传入到message
中.
为什么是 input
呢?
因为在vue中, 使用了v-model
的组件会自动监听input
事件,
并把这个input
事件所携带的值 传递给v-model所绑定的属性.
这样组件内部的值就给到了父组件了
如何利用v-model
实现自定义的表单组件:
监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit('input' ,data)
方法去触发input
事件