v-model实现父子组件通信

如何实现两个组件之间的双向传递呢？ 

即，在父组件中修改了值，子组件会立即更新。在子组件中修改了值，父组件中立即更新。

vue中有一个很神奇的东西叫 v-model，它可以完成我们的需求。

使用v-model过程中，父组件我们还是需要将子组件正常引入，只是传值方式改成了v-model

 

1、v-model一般用于表单的双向数据绑定

2、v-model原理 

由此看出，v-model是v-bind和v-on:input的结合，即监听了表单的input事件，然后修改value属性对应的值

3、v-model除了在输入表单上可以使用之外，在组件上也可以使用，以实现父子组件的双向数据绑定

// -------------------------------父组件



// -------------------------------子组件



最后，父组件中的flag默认为true，点击了子组件中的“确定”后，子组件将false传递给了父组件的flag

 

v-model在内部使用不同的属性为不同的输入元素抛出不同的事件：

text和textarea使用value属性和input事件；
checkbox和radio使用checked属性和change事件；
select字段将value作为prop并将change作为事件。

使用v-model双向通信的方法总结：

子组件设value为props属性，并且不主动改变value的值
子组件通过this.$emit(‘input’,‘参数’)将参数的值传给父组件
父组件通过v-model="flag"绑定一个本地的变量，即可实现子组件value与父组件双向通信（前提：传给父组件的值一定是你想赋给value的）