Vue.js中如何正确向子组件传递可选Ref？

先明确你代码里的几个核心问题：

1. Prop 命名和 emit 事件名不匹配：你定义的 Prop 是 modalValue，但 emit 的是 update:modelValue，导致双向绑定失效
2. 父组件绑定方式错误：v-bind="test" 不是正确的双向绑定写法，应该用 v-model 或 v-model:modalValue
3. 直接修改 toRef 生成的引用：toRef 来自 props，直接修改其值不符合 Vue 单向数据流原则，需要通过 emit 通知父组件更新

下面是可靠的实现方案，兼顾父组件绑定 Ref 双向同步和未绑定时组件内部独立管理状态两种场景：

自定义组件实现（TestComponent.vue） #

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const props = defineProps({
  // 用 modelValue 可直接使用 v-model 语法，也可自定义名称如 visible
  modelValue: {
    type: Boolean,
    default: undefined // 设为 undefined 方便判断父组件是否传值
  }
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

// 内部状态，用于未传 modelValue 时独立管理
const internalVisible = ref(props.modelValue ?? true)

// 计算属性，统一对外的可见性状态
const isVisible = computed({
  get() {
    // 父组件传值时优先使用父组件状态
    return props.modelValue !== undefined ? props.modelValue : internalVisible.value
  },
  set(newVal) {
    if (props.modelValue !== undefined) {
      // 父组件传值时，通过 emit 通知父组件更新
      emit('update:modelValue', newVal)
    } else {
      // 未传值时直接修改内部状态
      internalVisible.value = newVal
    }
  }
})

// 监听父组件 prop 变化，同步到内部状态，防止父组件主动修改时内部不同步
watch(() => props.modelValue, (newVal) => {
  if (newVal !== undefined) {
    internalVisible.value = newVal
  }
})
</script>

<template>
  <div v-if="isVisible">
    <button @click="isVisible = false">关闭</button>
  </div>
</template>

父组件调用示例 #

<script setup lang="ts">
import TestComponent from '@/components/TestComponent.vue'
import { ref } from 'vue'

const test = ref(true)
</script>

<template>
  <main>
    <p>父组件状态：{{ test }}</p>
    <!-- 绑定 Ref 实现双向同步 -->
    <TestComponent v-model="test" />
    <!-- 未绑定 Ref，使用组件默认状态 -->
    <TestComponent />
  </main>
</template>

方案说明 #

• 双向绑定兼容：通过 computed 的 get/set 处理两种场景，父组件传值时严格遵循单向数据流，通过 emit 同步；未传值时内部独立管理状态
• 状态同步可靠：添加 watch 监听父组件 prop 变化，确保父组件主动修改状态时，组件内部能同步更新
• 语法简洁：使用 modelValue 作为 Prop 名，直接支持 Vue 的 v-model 语法，无需额外自定义绑定名

内容的提问来源于stack exchange，提问作者H. Müller