Vue笔记——父子组件的双向数据绑定

Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理基本上大同小异。
子组件向父组件出传递数据，使用自定义事件的方式。
父组件向子组件传递数据，使用props属性的方式。

一、实现思路

之前写过两篇文章，分别介绍了父子组件之前如何单向传递数据，如果你对单向传递数据不熟悉，可以参考着两篇文章：

• Vue笔记——父组件向子组件传递数据
• Vue笔记——子组件向父组件传递数据

如果我们明确了如何在父子组件之间单向传递数据，那么在这个基础之上，我们就可以实现数据的双向绑定。

比如父组件向子组件传递了一个数据，子组件接收到这个数据之后，保存到自己的变量中。如果子组件中修改了这个变量，再通过触发自定义事件，将这个数据传递给父组件。父组件接收到这个数据之后，保存到自己对应的变量中。

这样就实现父子组件的双向数据绑定，如果父组件中改变了这个数据，那么子组件中会实时修改对应的数据；如果子组件中改变了这个数据，父组件中也会实时修改对应的数据。

二、具体实现

1.子组件代码：

<template>
  <div class="Child">
    <h1>{{ val }}</h1>
    <!-- 子组件中可以修改value数值 -->
    子组件：<input type="text" v-model="value">
  </div>
</template>

<script>
  export default {
    name: 'Child',
    // 在props属性里接收父组件传递过来的数据
    props: ["val"],
    data: function () {
      return {
        value: this.val    // 接收父组件传递过来的数据，保存到变量中
      }
    },
    // 一旦value数值发生改变，子组件触发自定义事件changeValue，将数据传递到父组件
    watch: {
      value: function () {
        console.log(666);
        this.$emit('changeValue', this.value)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2.父组件代码：

<template>
  <div id="app">
    <!-- 使用v-bind命令将父组件中的数据绑定到子组件上 -->
    <Child v-bind:val="value" v-on:changeValue="receiveValue"></Child>
    <!-- 父组件数据绑定，可以修改value的数值 -->
    父组件：<input type="text" v-model="value">
  </div>
</template>

<script>
  import Child from './components/Child.vue'

  export default {
    name: 'App',
    components: {
      Child
    },
    data: function () {
      return {
        value: "初始化数据",
      }
    },
    methods:{
      // 子组件触发changeValue事件，调用此方法，将子组件中的数据传递到父组件中
      receiveValue:function(receive){
        this.value = receive;
      }
    }
  }
</script>

<style>

</style>