Vue3中子组件覆盖状态未同步至父组件的按钮显示异常问题

1. Vue3 严格遵循单向数据流规则 #

Vue3 对单向数据流的限制比 Vue2 更严格，子组件的 overlay 是父组件传递的 props，子组件直接修改 props 的值不会同步回父组件。即使子组件内调用 setOverlay 修改了 overlay，这个修改仅存在于子组件内部的临时引用，无法反向更新父组件的 ammdisabled 状态。

2. 未通过自定义事件完成状态同步 #

子组件触发 toggleAMM 事件后，若父组件没有在事件回调中主动更新自身的 ammdisabled 值，父组件的状态就不会跟随子组件变化。比如：

• 子组件代码示例：

  this.setOverlay(!this.overlay)
  this.$emit('toggleAMM', this.overlay)
  

• 若父组件仅监听事件但不更新 ammdisabled：

  <AutomatedMarketMaking :overlay="ammdisabled" @toggleAMM="handleToggle" />
  

  // 错误写法：未更新ammdisabled
  const handleToggle = () => {}
  

  这种情况下父组件的 ammdisabled 始终是初始值，自然无法切换按钮显示。

3. 误用本地状态替代props同步 #

如果子组件将 overlay props 赋值给了本地 data/ref，后续修改的是本地状态而非props，且未将本地状态同步给父组件，也会导致父组件无法获取最新状态。比如：

// 子组件错误示例
const overlay = ref(props.overlay)
const setOverlay = (val) => {
  overlay.value = val
  this.$emit('toggleAMM') // 未传递最新状态值
}

此时子组件修改的是本地 overlay，父组件的 ammdisabled 完全感知不到变化。

4. Vue2 到 Vue3 的双向绑定语法差异 #

Vue2 中可以通过 .sync 修饰符实现 props 的双向绑定，但 Vue3 已移除 .sync，统一使用 v-model 结合自定义事件的方式。如果仍沿用 Vue2 的旧写法，会导致状态无法同步。

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