vue组件应用v-model

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官方文档