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); //数据深拷贝
	}
}
Logo

前往低代码交流专区

更多推荐