Vue3中如何修改子组件接收的props属性值？

在Vue项目中，存在以下组件结构：
父组件代码：

<notification-row v-for="(item, index) in notifications" :key="index" :item="item" />

子组件代码片段：

...
    <tr class="notification-row" :class="{ active: props.item.status !== 'readed' }">
...

业务需求：子组件发送请求修改状态后，需要更新props.item.status的值，该如何实现？

实现方案 #

Vue遵循单向数据流规则，子组件不能直接修改props属性，正确的实现方式是通过子组件触发事件通知父组件，由父组件更新数据源，具体步骤如下：

1. 子组件发送请求后触发自定义事件 #

在子组件的请求回调中，请求成功后通过$emit触发一个自定义事件（比如update-status），同时传递需要更新的状态和对应数据的唯一标识（比如id）：

// 子组件内的请求逻辑示例
async markAsRead() {
  try {
    // 发送修改状态的接口请求
    await api.updateNotificationStatus(this.props.item.id, 'readed');
    // 触发事件，把更新信息传递给父组件
    this.$emit('update-status', this.props.item.id, 'readed');
  } catch (err) {
    console.error('修改状态失败', err);
  }
}

2. 父组件监听事件并更新数据源 #

父组件在使用子组件时，监听子组件触发的update-status事件，找到对应的通知项并更新其status值：

<notification-row 
  v-for="(item, index) in notifications" 
  :key="item.id" <!-- 建议用数据唯一id作为key，不要用index，避免渲染异常 -->
  :item="item"
  @update-status="handleUpdateStatus"
/>

然后在父组件的方法中实现事件处理逻辑：

methods: {
  handleUpdateStatus(itemId, newStatus) {
    // 找到目标通知项并更新状态
    const targetItem = this.notifications.find(item => item.id === itemId);
    if (targetItem) {
      targetItem.status = newStatus;
    }
  }
}

3. 可选优化：用v-model语法糖简化代码 #

如果想简化写法，可以利用Vue的v-model语法糖，子组件定义model选项后触发对应事件：

• 子组件代码：

export default {
  model: {
    prop: 'item',
    event: 'update'
  },
  props: ['item'],
  methods: {
    async markAsRead() {
      await api.updateNotificationStatus(this.item.id, 'readed');
      // 拷贝原对象并修改状态，避免直接操作props
      const updatedItem = {...this.item, status: 'readed'};
      this.$emit('update', updatedItem);
    }
  }
}

• 父组件代码：

<notification-row 
  v-for="(item, index) in notifications" 
  :key="item.id"
  v-model="notifications[index]"
/>

内容的提问来源于stack exchange，提问作者Stanislavkm