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="text"
           :value="msg"
           @input="bind">
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    bind () {
      this.msg = event.target.value
    }
  }
}
</script>

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

// -------------------------------父组件
<template>
  <div>
    <!-- 在父组件中用v-model相当于，v-bind绑定了value，以及执行了v-on:input事件 -->
    <child v-model="flag"></child>
    <div>{{flag}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      flag: ''
    }
  },
  components: {
    child
  }
}
</script>

// -------------------------------子组件
<template>
  <div>
      <div class="btn" @click="confirm">确定</div>
  </div>
</template>
<script>
export default {
// 用props接收父组件传递的value值，从而实现双向数据绑定
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 通过$emit触发父组件的input事件，并将第二个参数作为值传递给父组件
    confirm () {
      this.$emit('input', false)
    }
  }
}
</script>

最后，父组件中的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的）