- v-model 指令
<input v-model="text" />
上例不过是一个语法糖，展开来是：
<input :value="text"
@input="e => text = e.target.value" />
- .sync 修饰符 这也是一个语法糖，剥开来是：
` <my-dialog :visible="dialogVisible"
@update:visible="newVisible => dialogVisible = newVisible" />`
my-dialog 组件在 visible 变化时 this.$emit('update:visible', newVisible) 即可。
- model 属性 (JSX/渲染函数中) Vue 在 2.2.0 版本以后，允许自定义组件的 v-model，这就导致在 JSX / 渲染函数中实现 v-model 时得考虑组件的不同配置，不能一律如此（假使 my-dialog 组件的 model 为 { prop: 'visible', event: 'change' }）：
{
render(h) {
return h('my-dialog', {
props: { value: this.dialogVisible },
on: { input: newVisible => this.dialogVisible = newVisible }
})
} }
而应如此：
{
render(h) {
return h('my-dialog', {
props: { visible: this.dialogVisible },
on: { change: newVisible => this.dialogVisible = newVisible }
})
} }
然而，利用 model 属性，完全可以做到不用管它 prop、event 的目的：
{
render(h) {
return h('my-dialog', {
model: {
value: this.dialogVisible,
callback: newVisible => this.dialogVisible = newVisible
}
})
} }
JSX 中这样使用：
{
render() {
return (
<my-dialog
{...{
model: {
value: this.dialogVisible,
callback: newVisible => this.dialogVisible = newVisible
}
}}
/>
)
} }
