v-model实现父子组件通信

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

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

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

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

 

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

<template>
  <div>
    <input type="text"
           v-model="msg">
    <p>{
  {msg}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: ''
    }
  }
}
</script>

2、v-model原理 

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

<template>
  <div>
    <input type="te