这篇文章主要介绍了浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,需要的朋友可以参考下
一、vue2 中 sync 修饰符的功能在 vue3 中如何呈现？
1、sync 修饰符回顾
1、vue 规则：props 是单向向下绑定的，子组件不能修改 props 接收过来的外部数据。
2、如果在子组件中修改 props ，Vue会向你发出一个警告。（无法通过修改子组件的props来更改父组件。）而若需要在子组件更新数据时通知父组件同步更新，需要结合 $emit 和 v-on 实现。
3、而sync修饰符的作用则是简化事件声明及监听的写法。
如下例子，比较sync和正常修改数据通知外层的写法：可以看到 sync 修饰符确实简便了许多。
// 父组件数量： {{num}}//子组件 接收数量： {{num}}
2、多个数据双向绑定 - 与单数据绑定差别不大
// 父组件
// 子组件对应为 props: { modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue type: String, default: '' }, address: { // 父组件 v-model 有指定参数名，则是指定参数名 type: String, default: '' } }, // input初始化 const sea = ref(props.modelValue) const add = ref(props.address) // 如果父组件传过来的数据是异步获取的，需要进行监听 watch(() => props.modelValue, () => { sea.value = props.modelValue }) watch(() => props.address, () => { add.value = props.address }) // 数据双向绑定 emit('update:modelValue', e) emit('update:address', e)3、利用 computed 简化父子组件双向数据绑定
上面是通过 ref 声明响应式数据，其实可以通过 computed 计算属性的 get / set 去简化操作。如下：
const props = defineProps({ modelValue: { type: Boolean, default: false } }) const emit = defineEmits(['update:modelValue']) const show = computed({ get() { return props.modelValue }, set(v) { emit('update:modelValue', v) } })到此这篇关于浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定的文章就介绍到这了,更多相关Vue3父子组件双向绑定内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定的详细内容，更多请关注0133技术站其它相关文章！
