Vue 中实现双向绑定的 3种方法

1, v-model 指令

<input v-model="text" />
//上例不过是一个语法糖，展开来是：
<input
 :value="text"
 @input="e => text = e.target.value"
/>

2, .sync 修饰符

<my-dialog :visible.sync="dialogVisible" />
// 这也是一个语法糖，剥开来是：
<my-dialog
 :visible="dialogVisible"
 @update:visible="newVisible => dialogVisible = newVisible"
/>

my-dialog 组件在 visible 变化时 this.$emit('update:visible', newVisible) 即可。

其他（不常用）

1. Vue 在 2.2.0 版本以后，允许自定义组件的 v-model

{
  render(h) {
    return h('my-dialog', {
      model: {
        value: this.dialogVisible,
        callback: newVisible => this.dialogVisible = newVisible
      }
    })
  }
}