Vue 3使用update-emit更新prop时父组件变量未更新问题

问题分析 #

你遇到的问题是子组件触发update:show事件后，父组件的showModal未更新，核心原因是用watch同步prop和本地状态的方式存在同步时机隐患，且初始值同步逻辑不完整。

最优修复方案：使用计算属性实现双向绑定 #

替换子组件中的data和watch为计算属性，通过get/set直接关联prop和组件内部状态，这是Vue官方推荐的双向绑定实现方式：

<template lang="pug">
b-modal(v-model="dshow")
  template(v-slot:default) test
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dshow: {
      // 从父组件prop获取值
      get() {
        return this.show
      },
      // 向父组件传递更新事件
      set(val) {
        this.$emit('update:show', val)
      }
    }
  }
}
</script>

备选方案：修复watch逻辑 #

如果坚持使用watch方式，需要补充初始值同步并添加immediate选项确保状态实时同步：

<template lang="pug">
b-modal(v-model="dshow")
  template(v-slot:default) test
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 初始直接赋值prop值，避免首次同步延迟
      dshow: this.show
    }
  },
  watch: {
    show: {
      // 立即执行一次，确保初始值同步
      immediate: true,
      handler(val) {
        this.dshow = val
      }
    },
    dshow(val) {
      this.$emit('update:show', val)
    }
  }
}
</script>

说明 #

• 计算属性方案逻辑更简洁，完全避免了watch可能带来的同步延迟或循环触发问题；
• 两种方案都能解决你当前的问题，但计算属性是处理prop双向绑定的最佳实践。

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