Vue3中如何实现组件props与自身本地数据的双向绑定？

开发者阿泽

2026-10-6

解决方案

Vue3中实现这种父子组件状态同步的常用方案是结合 prop监听+自定义事件 ，或者直接用Vue3内置的v-model参数语法实现双向绑定，避免父子状态不一致导致的触发失效问题。

方案1：选项式API写法（适配你当前的代码结构）

子组件 ModalComponent.vue 修改如下：

<template>
   <div v-if="showModal">
      ...
      <button @click="handleClose">内部关闭模态框</button>
   </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showModal: false,
    }
  },
  watch: {
    // 监听父组件传入的show值变化，同步到本地状态
    show(newVal) {
      this.showModal = newVal
    },
    // 本地状态变化时同步给父组件
    showModal(newVal) {
      this.$emit('update:show', newVal)
    }
  },
  methods: {
    handleClose() {
      this.showModal = false
    }
  }
}
</script>

父组件绑定方式修改为`v-model:show`：

<template>
  <button @click="showChild = !showChild">点击打开模态框</button>
  <ModalComponent v-model:show="showChild" />
</template>

<script>
import ModalComponent from './ModalComponent.vue'
export default {
  components: {ModalComponent},
  data() {
    return {
      showChild: false,    
    }
  }
}
</script>