vue多层嵌套下的数据绑定

vue作为数据驱动，通过数据和视窗view层绑定，操作数据即可触发view层的更新，所以数据绑定尤为重要

单层的数据绑定很简单，父组件传值进去，子组件通过props获取，然后通过$emit事件携带参数回调
父组件

<v-child :vlaue="data" @update="update"></v-child>

子组件

<template>
	<input :value="value" type="text" @input="input">
</template>

export default {
	props: ['value'],
	methods: {
		input(e) {
			this.$emit('update', e.target.value)
		}
	}
}

单层嵌套下，数据非常简单，可以迅速定位数据的节点，如上例，父组件中只需要通过修改data值即可，而多层嵌套或者在递归组件中，你很难去定位，发生变动的是处于数据树上的哪一个位置，那么操作数据就会变得非常困难。而vue中是禁止子组件直接修改父组件所传的值，而必须通过$emit回调并传值。

解决方案将上例修改一下即可
父组件

<v-child v-model="data"></v-child>

子组件

<template>
	<input :value="value" type="text" @input="input">
</template>

export default {
	props: {
		['value']
	},
	methods: {
		input(e) {
			this.$emit('input', e.target.value)
		}
	}
}

有时，子组件并非一个input，而是其他的一些东西，于是改进版
父组件不变

<v-child v-model="data"></v-child>

子组件

<template>
	<input v-model="valueSync" type="text">
</template>

import { deepCopy } from "@/api/tools.js";
export default {
	props: {
		['value']
	},
	data () {
		valueSync: ''
	},
	watch: {
		valueSync: {
			handler() {
				if( this.valueSync ) {
					this.$emit('input', this.valueSync);
				}
			}
		}
	},
	created () {
		this.valueSync = deepCopy(this.value); //数据深拷贝
	}
}