Vue.js 3中如何修改v-for创建的子组件的props

推荐方案：基于数据驱动修改（Vue最佳实践） #

Vue的核心是数据驱动视图，子组件的actor属性由父组件的store.plan数据源通过props传递，因此直接修改数据源中对应项的属性，子组件会自动响应更新，这是最符合Vue设计理念的方式：

1. 在父组件的changeActor方法中，接收子组件传递的参数，定位到store.plan中对应的条目：

changeActor(payload) {
  const targetAction = this.store.plan.find(item => item.act_id === payload.act_id);
  if (targetAction) {
    // 修改对应条目的actor属性，子组件会自动同步更新
    targetAction.actor = payload.actor; // 替换为你需要设置的新值
  }
}

备选方案：直接操作子组件实例（不推荐，仅特殊场景使用） #

如果因特殊需求必须直接操作子组件实例，可以通过动态ref定位到目标子组件，但这种方式会破坏Vue的响应式数据流，容易引发状态不一致问题，需谨慎使用：

1. 给子组件添加动态ref标识：

<div class="planlist">
    <ul id="planOl">
    <PlanLego
        v-for="action in store.plan"
        v-if="action !== activeStep"
        :action_id="action.act_id"
        :actor="action.actor"
        :blocked="action.blocked"
        :key="action.act_id"
        :ref="`planLego_${action.act_id}`"
        @choose="planClick"
        @fix="changeActor"
    />
    </ul>
</div>

2. 在父组件的changeActor方法中获取对应子组件实例并修改属性：

changeActor(payload) {
  const targetComponent = this.$refs[`planLego_${payload.act_id}`];
  if (targetComponent) {
    // 直接修改子组件的actor属性
    // 注意：如果actor是props，不建议直接修改，应该通过父组件传递的props更新；如果是子组件内部data属性，可直接修改
    targetComponent.actor = payload.actor;
  }
}

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