一句话解释:
双向绑定顾名思义, 使用v-bind实现data=>input, 使用@input事件实现input=>data
1 v-model 用在 input 元素上时
使用
<input v-model="sth" />
原理
<input v-model="sth" />
等价于:
<input :value="sth" @input="sth = $event.target.value" />
//input 元素本身有个 oninput 事件,每当输入框内容发生变化,就会触发 oninput
2 v-model 用在组件上input时, 父子相互通讯
使用
父: <Son v-model="price" />
子:
<template>
<span>
<input ref="input" :value="value" @input="$emit('input', $event.target.value)" >
</span>
...
props:['value']
原理
<Son v-model="price" />
等价于:
<Son :value="price" @input="price = arguments[0]" />
就是个语法糖
类似.sync
使用
父: <Son :money.sync="m" />
子:
<template>
<span>
<p @click="$emit('updata:money', money-100)" >{{money}}</p>
</span>
...
props:['money']
原理
<Son:money.sync="m" />
等价于:
<Son :money="m" @updata:money="m = $event" />
//在原生事件中,$event是事件对象, 在自定义事件中,$event是传递过来的数据