vue多层嵌套下的数据绑定
vue作为数据驱动,通过数据和视窗view层绑定,操作数据即可触发view层的更新,所以数据绑定尤为重要单层的数据绑定很简单,父组件传值进去,子组件通过props获取,然后通过$emit事件携带参数回调父组件<v-child :vlaue="data" @update="update"></v-child>子组件<template><inp...
·
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); //数据深拷贝
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)