Vue子组件如何将reactive变量timeAnswer的值传递给父组件用于提交

针对你当前使用组合式API+reactive定义变量的场景，有两种常用实现方式：

方式1：自定义事件/双向绑定（适合需要实时同步值的场景） #

子组件内部通过自定义事件将timeAnswer实时同步给父组件：

1. 子组件定义抛出事件，监听timeAnswer变化同步抛出

// 子组件 <script setup> 部分
import { watch, reactive } from 'vue'
// 定义要抛出的事件
const emit = defineEmits(['update:timeAnswer'])
// 你的原有变量定义
const timeAnswer = reactive({ start: 0, duration: 900 });

// 监听timeAnswer变化，实时抛出给父组件
watch(timeAnswer, (newVal) => {
  // 解构传递避免响应式引用污染父组件数据
  emit('update:timeAnswer', { ...newVal })
})

2. 父组件绑定事件接收值，提交时直接读取即可

<!-- 父组件引入子组件时绑定事件 -->
ChildComponent(v-model:timeAnswer="childTimeAnswer")
button(@click="handleSubmit") 提交

// 父组件内定义变量接收子组件传值
const childTimeAnswer = ref({})
// 提交逻辑
const handleSubmit = () => {
  // 直接读取childTimeAnswer.value就是最新的滑块值
  console.log('要提交的时间值：', childTimeAnswer.value)
  // 后续提交接口逻辑
}

方式2：父组件通过ref主动获取（适合仅提交时需要取值的场景，性能更高） #

不需要实时同步，仅在点击提交按钮时从子组件获取最新值：

1. 子组件暴露timeAnswer给外部

// 子组件 <script setup> 末尾添加如下代码，将timeAnswer暴露给父组件
defineExpose({
  timeAnswer
})

2. 父组件给子组件绑定ref，提交时读取值

<!-- 父组件给子组件绑定ref -->
ChildComponent(ref="childCompRef")
button(@click="handleSubmit") 提交

// 父组件内定义子组件ref
const childCompRef = ref(null)
// 提交逻辑
const handleSubmit = () => {
  // 从子组件实例读取最新的timeAnswer值
  const submitTimeVal = { ...childCompRef.value?.timeAnswer }
  console.log('要提交的时间值：', submitTimeVal)
  // 后续提交接口逻辑
}

注意事项 #

• 传递值时做解构或者使用toRaw(timeAnswer)处理，避免父子组件共用同一个响应式引用导致的互相影响
• 如果你使用的是Vue2，逻辑一致，仅需将defineEmits替换为this.$emit，defineExpose直接在子组件的data或methods中返回对应属性即可

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