vue3 emit update不生效

记一次坑爹的vue3自定义属性双向数据传递时 emit update不生效的事情

//父组件

<CustomerDetailForm :list="formData.customerDetails" :is-detail="isDetail" />


//子组件
<template>
<el-table :data="list" :stripe="true" :show-overflow-tooltip="true" @selection-change="handleSelectionChange">

const props = defineProps<{
  list: CustomerDetailVO[],
  isDetail: Boolean
}>()


/** 提交表单 */
const emit = defineEmits(['update:list']) // 定义事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  let newList=[]
  if (formData.value.id) {
    //修改item
    newList = props.list.map((item, index, array) => {
      if (item.id === formData.value.id) {
        item = formData.value
      }
      return item;
    })
  } else {
    newList=props.list
    //push
    newList.push(formData.value)
  }
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('update:list', newList)
}


/** 删除按钮操作 */
const handleDelete = async (row?: CustomerDetailVO) => {
  try {
    await message.delConfirm()
    let newList=[]
    if (row) {
      newList = JSON.parse(JSON.stringify(tableList.value.filter((item) => item !== row)))
    } else {
      newList = JSON.parse(JSON.stringify(tableList.value.filter((item) => !selectItems.includes(item))))
    }
    console.log('del', newList)
    // 发送操作成功的事件
    emit('update:list', newList)
  } catch {

  }
}

var selectItems = [];

/** 多选框选中数据 */
const handleSelectionChange = (selection, row) => {
  selectItems = selection
}

一开始，子组件的submitForm()在页面上是有效果的。所以一直困惑，为什么submitForm()里面的emit生效了，handleDelete()的emit不生效。。。

最后才发现，父组件应该写v-model:list="formData.customerDetails"。:list前面要加v-model。

一开始以为的生效，根本没生效。界面有反应的原因是props.list的引用赋值给newList之后，newList调用push方法，实际是通过引用改变了父组件的值，根本不是通过emit传递的值。。

总结，Vue3 的自定义props如果要使用数据双向传递，前面一定要规规矩矩的写v-model。