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

  • Post author:
  • Post category:vue




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



版权声明:本文为qq_39649806原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。