>[warning] 父子组件双向绑定 --- 例: 封装一个表单输入框的组件, 需要传入一个变量绑定, 同时此变量需双向数据绑定的. 写法如下: (当然props的vModel名字随便) ``` 页面组件上: <my-input v-model="val"></my-input> data() { return{ val: "" } } 封装组件MyInput.vue内: <div> <input type="text" v-model="vModel"> </div> props: { vModel: String } ``` 漂亮, 报错了:  emmm~ 大概意思是: 避免直接改变props属性 >[info] 解决方案, 使用v-model --- 子组件使用指令v-model来绑定val变量 (实际上value - val关联上) 子组件内需要修改下, 既然不能直接修改props, 那么我们就接收v-model传入的value值获取, 触发v-model底层实现的原理 @input事件, 把值传回给表单value属性, 再同步给val变量 ``` 封装组件MyInput.vue内: <div> <input type="text" v-model="vModel"> </div> props: { value: String // v-model内部原理, 默认绑定的属性是value值 }, computed: { vModel: { set (val) { this.$emit("input", val); // 触发v-model内部的input事件, 把值绑定给表单的value属性 }, get () { return this.value; } } } ```