v-model是 Vue2 中唯一支持双向绑定的指令，用于表单控件绑定，但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了，v-model其实是个语法糖。
<input v-model="something">
这不过是以下示例的语法糖：
<input v-bind:value="something" v-on:input="something = $event.target.value"> //简写：<input :value="something" @input="something = $event.target.value">
也就是说，你只需要在组件中声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value。
//父组件中引用 {{title}}用来测试这里显示'111111'，（测试1） <myComponent v-model="title"></myComponent> 这里title是动态值，在data里可以自己设置默认值，假如这里我们设置为“111111” //子组件 Vue.component('my-component', { template: `<div> {{value}}//用来测试，这里显示'111111'，（测试2） <button @click="handleInput">按钮</button> </div>`, props: ['value'], //接收一个 value prop methods: { handleInput() { this.$emit('input', '222222'); //触发 input 事件，并传入新值 //点击后（测试1）（测试2）的值均会变化成'222222' } } });
我们来做一个组件内部控制关闭的弹窗
查看详情：demo
demo里我保留了一些测试的东西，希望你能看的明白
想一想，如果我们要绑定多个值的情况
如果绑定多个值的话，建议我们用object对象类型，Array数组类型，也就是说我们接收的value类型需要改变下。
//子组件 Vue.component('my-component', { template: `<div> {{value}} <button @click="handleInput">按钮</button> </div>`, props: {//这里我们换一种方法写，其实写成上边的 props: ['value']也是可以的 value:{ type: Object //设置验证类型为对象 } }, methods: { handleInput() { this.$emit('input', '222222'); } } });
props的验证类型建议也看看：props的验证类型
