vue3父子组件使用v-model绑定props实现双向数据绑定

最新推荐文章于 2024-07-16 21:17:22 发布

您的小透明

最新推荐文章于 2024-07-16 21:17:22 发布

阅读量4.7k

点赞数 3

分类专栏： vue3 ts 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_39649806/article/details/127959450

版权

vue3 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

本文探讨了在Vue3中如何处理父子组件间的v-model双向数据绑定，尤其是在ESLint报错的情况下。通过引用官方文档的高级组件配合v-model使用章节，解释了解决此类问题的方法。

摘要由CSDN通过智能技术生成

首先不做处理直接使用v-model绑定

/**
* 父组件
*/
<detail-filter-item :row-data="item" />

/**
* 子组件
*/
 <el-input v-model="props.rowData.rowfieldVal" />

ESLint会报错
ESlint报错

处理后

/**
* 父组件
*/
<detail-filter-item :row-data="item" />

/**
* 子组件
*/
 <el-input v-model="tempData.rowfieldVal" />
 
 // js代码
const props = defineProps(['rowData'])

const emit = defineEmits(['update:rowData'])

const tempData = computed({
  get: () => props.rowData,
  set: val => {
    emit('update:rowData', val)
  }
})