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

首先不做处理 直接使用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)
  }
})

参考:vue3官方文档【高级组件 - 配合 v-model 使用】

你可能感兴趣的:(vue3,ts,javascript,前端,开发语言)