vue组件应用v-model
一、input上的v-model原理
vue中的v-model最常用的就是在input节点上,像下面这样:
<input type="text" v-model="message">
v-model实际上是一种数据和方法绑定的语法糖
<input type="text" :value="message" @input="message = $event.target.value">
当然也可以使用自定义方法进行事件绑定
<input type="text" :value="value" @input="sendMessage($event.target.value)">
二、组建上应用v-model
在parent父组件中使用child子组件,并进行双向数据绑定
<child v-model="message"></child>
结合上面input的解析,这里实际上也是一种语法糖
<child :value="message" @input="message = $event"></child>
注意这里取值是$event
,而不是 $event.target.value
,这是因为这里的 v-on:input
实际上是子组件向父组件发射的事件名称。
温习一下子组件向父组件传递发射事件并附值的用法:
/***
在父组件中绑定一个事件,通过$event
获取到子组件传递过来的值
<child @trans-message="getMessage($event)"></child>
然后在子组件中触发trans-message
事件
<button @click="$emit('trans-message', 'Hello')"></button>
tip: 自定义的方法一定要使用‘“-” 连接符来命名,不能使用驼峰命名的方式。
*/
那么,在组件中使用 v-model 时,就需要我们在子组件中向父组件发射 input 事件。
child模板:
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
同时需要在child组件中定义prop:
props: ['value']
至此,就可以实现在组件上应用 v-model
实现双向数据绑定。
详情参考vue官方文档