Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理基本上大同小异。
子组件向父组件出传递数据，使用自定义事件的方式。
父组件向子组件传递数据，使用props属性的方式。
一、实现思路
之前写过两篇文章，分别介绍了父子组件之前如何单向传递数据，如果你对单向传递数据不熟悉，可以参考着两篇文章：
如果我们明确了如何在父子组件之间单向传递数据，那么在这个基础之上，我们就可以实现数据的双向绑定。
比如父组件向子组件传递了一个数据，子组件接收到这个数据之后，保存到自己的变量中。如果子组件中修改了这个变量，再通过触发自定义事件，将这个数据传递给父组件。父组件接收到这个数据之后，保存到自己对应的变量中。
这样就实现父子组件的双向数据绑定，如果父组件中改变了这个数据，那么子组件中会实时修改对应的数据；如果子组件中改变了这个数据，父组件中也会实时修改对应的数据。
二、具体实现
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>
