使用过Vue的同学应该都了解组件之间传值
父组件 --> 子组件 ： props
子组件 --> 父组件 ： 事件
其实有一种更为简单的方法，是基于上述两种方法，那就是 v-model
我们都在表单中使用过 v-model 来绑定数据，其实组件之间也是可以用 v-model 进行双向绑定的
我们来了解一下 v-model 的原因
<input type="text" v-model="message" /> <!--其实上面这种写法只是一个语法糖，本质如下--> <input type="text" v-bind:value="message" v-on:input="message = $event.target.value" />
由此看出 v-model 的本质就是绑定一个属性和事件
因此在组件中可以这样使用
<!--html--> <my-component v-model="message"></my-component> <!--JS--> Vue.component(‘my-component‘,{ template: `<select @change="changeSelect()" ref="selector"> <option value="0">javascript</option> <option value="1">PHP</option> <option value="2">C#</option> </select>`, props:[‘value‘], methods: { changeSelect(){ this.$emit(‘input‘,this.$refs.selector.value) } } }) var app = new Vue({ el : ‘#app‘, data(){ return { message : 1 } } })
原文：https://www.cnblogs.com/xiaoliwang/p/9737977.html