vue3父子组件传值 双向绑定及注意问题小结
更新时间：2022年12月12日 12:33:14 作者：古兰精
这篇文章主要介绍了Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,本文结合示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
attribute agruments
vue3父子组件传值 双向绑定 及注意事项
https://www.jb51.net/article/269785.htm 可以参考下
首先注意
父子组件传值是单项数据流，vue3中子组件是不能直接修改父组件数据的，vue2中是可以直接使用sync的语法，直接进行修改的而sync修饰符的作用则是简化事件声明及监听的写法。
注意事项：
// 父组件 // v-model 没有指定参数名时，子组件默认参数名是modelValue <ChildComp v-model="search" />
（1）子组件也并不是直接拿 props 传的变量直接用，而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。
（2）且如果父组件传的是异步数据的话，还需要对其进行监听。
（3）当子组件数据改变时需要通过 emit('update:modelValue', e) 去修改父组件数据实现双向绑定。
举例子：单个数据绑定
<template>
<div>
<input v-model="sea" @input="valChange(sea)" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
name: 'ChildComp',
props: {
modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
type: String,
default: ''
}
},
setup (props, { emit }) {
// input初始化
const sea = ref(props.modelValue)
// 如果父组件传过来的数据是异步获取的，则需要进行监听
watch(() => props.modelValue, () => { sea.value = props.modelValue })
// 数据双向绑定
function valChange (e: string) {
emit('update:modelValue', e)
}
return {
sea,
valChange
}
}
})
</script>
到这就是，在子组件中可以使用你定义ref来使用修改了，可以使用emit的方法回传数据，也可以直接在页面上直接使用v-model来进行双向数据绑定
到此这篇关于Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定的文章就介绍到这了,更多相关Vue3父子组件的双向数据绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中响应式布局如何将字体大小改成自适应，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue中自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue-router的HTML5 History模式设置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了iphone刘海屏页面适配方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
vue开发利器之unplugin-auto-import的使用
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,下面这篇文章主要给大家介绍了关于vue开发利器之unplugin-auto-import使用的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue项目之webpack打包静态资源路径不准确的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文介绍了如何利用Vue和Vant框架结合moment.js插件来实现一个7天日历展示功能,在这个功能中,用户可以在切换日期时看到界面的实时变化,此外,文章还提供了代码实现和效果测试的详细步骤,帮助开发者能够顺利完成类似的项目开发2024-10-10
Vue3.0之引入Element-plus ui样式的两种方法
本文主要介绍了Vue3.0之引入Element-plus ui样式的两种方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要为大家详细介绍了使用Vue3封装实现支持Base64导出的电子签名组件的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以了解下2025-03-03
最新评论