Vue3 Options API子组件emit未实现父子双向绑定问题排查

核心结论 #

你的问题不是子组件的emit方式错误，而是中间层parent-1没有正确传递双向绑定的响应式链路，导致上下层的状态同步断裂。单向绑定正常是因为它只需要向下传递props，无需反向事件反馈；而双向绑定需要完整的「父传子props + 子传父emit」链路，中间层缺失任何一环都会引发同步问题。

具体问题拆解 #

1. 子组件选值时parent-2的watch未触发

当用户在子组件选择下拉项时，子组件的computed的set方法确实执行了$emit('update:vModelSelectedGeometryOrder', 新值)，但如果parent-1只是接收了vModelSelectedGeometryOrder这个props，却没有把update:vModelSelectedGeometryOrder事件向上转发给parent-2，那么parent-2中绑定的变量根本不会更新，自然watch不会触发。

简单说：事件卡在了parent-1层，没有传递到最上层。

2. parent-2设值时子组件不同步

如果parent-1没有把自身接收的vModelSelectedGeometryOrderprops原封不动地传递给子组件，或者传递时破坏了响应式（比如用非响应式变量中转、未通过props传递），那么parent-2更新值后，parent-1的props虽然更新了，但子组件接收不到最新值，导致computed不执行、显示不同步。

正确的嵌套双向绑定实现方式 #

以下是基于Vue3 Options API的三层组件正确传递示例：

子组件代码

export default {
  props: {
    vModelSelectedGeometryOrder: {
      type: [String, Number],
      required: true
    },
    isOrdersDropDownListDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    selectedOrder: {
      get() {
        console.log('子组件computed get执行')
        return this.vModelSelectedGeometryOrder
      },
      set(val) {
        console.log('子组件computed set执行')
        // 你的emit写法是正确的
        this.$emit('update:vModelSelectedGeometryOrder', val)
      }
    }
  }
}

parent-1组件代码

必须完整传递props和向上转发事件：

export default {
  props: {
    vModelSelectedGeometryOrder: {
      type: [String, Number],
      required: true
    },
    isOrdersDropDownListDisabled: {
      type: Boolean,
      default: false
    }
  },
  // 声明要向上转发的事件（可选，但符合规范）
  emits: ['update:vModelSelectedGeometryOrder'],
  methods: {
    forwardOrderUpdate(val) {
      this.$emit('update:vModelSelectedGeometryOrder', val)
    }
  }
}

parent-1模板（两种写法二选一）：

<!-- 写法1：手动传递props和监听事件 -->
<子组件
  :v-model-selected-geometry-order="vModelSelectedGeometryOrder"
  :is-orders-drop-down-list-disabled="isOrdersDropDownListDisabled"
  @update:vModelSelectedGeometryOrder="forwardOrderUpdate"
/>

<!-- 写法2：用v-model语法糖简化 -->
<子组件
  v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
  :is-orders-drop-down-list-disabled="isOrdersDropDownListDisabled"
/>

parent-2组件代码

export default {
  data() {
    return {
      selectedGeometryOrder: '默认值',
      isDropDownDisabled: false
    }
  },
  watch: {
    selectedGeometryOrder(newVal) {
      console.log('parent-2 watch触发', newVal)
    }
  }
}

parent-2模板：

<parent-1
  v-model:vModelSelectedGeometryOrder="selectedGeometryOrder"
  :is-orders-drop-down-list-disabled="isDropDownDisabled"
/>

关键注意点 #

• 三层组件的双向绑定，每一层都要承担「传递props + 转发update事件」的责任，不能让中间层只做接收不做转发。
• 确保所有传递的变量都是响应式的（通过props或Vue的响应式API声明），避免用普通变量中转导致响应式丢失。

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