Vue2 取消了.sync指令修饰符，推崇单向闭环的数据流。即：父级通过props向子级传递数据，子级如果需要修改数据就需要在父级添加监听事件，并在子级中去触发事件修改值。

在多数情况下，是不需要双向绑定的，单向数据流更容易追踪数据变化排查问题。但一些特定场景下，如弹窗，除了外部由父组件控制显示和隐藏外，组件内部也有关闭和取消等按钮需要控制显示和隐藏。这虽然可以通过触发事件让父级修改显示状态来实现，但每一个弹窗组件都需要做一遍这样的事总觉得很不爽。

v-model

v-model是 Vue2 中唯一支持双向绑定的指令，用于表单控件绑定，但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了，v-model其实是个语法糖。

<input v-model="something">
<!-- 等价于以下内容 -->
<input :value="something" @input="something = $event.target.value">

也就是说，你只需要在组件中声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value。

父组件中引用
<myComponent v-model="title"></myComponent>
子组件
const myComponent = {
    template: '<div><h1>{{value}}</h1><button @click="changeTitle">Change</button></div>',
    props: {
        value: String
    },
    methods: {
        changeTitle() {
            this.$emit('input', '子组件')
        }
    }
}

上面这个例子，最初显示的是父组件传入的title，点击子组件中的按钮后会修改显示值为子组件。

组件内部控制关闭的弹窗

现在可以解决弹窗组件内部自行关闭的问题了。

Demo

多字段的双向绑定

一个组件只能定义一个v-model，假如想双向绑定多个值怎么办？

v-model并没有限制value的数据类型，只是限制了是一个值！那么只需要把value的数据类型换成Object或者Array，把多出的字段作为对象的属性或数组的元素传入，多少个都不是问题了。

从最佳实践角度出发，推荐只是特定场景下使用，比如自定义的表单组件。