Vue 3：如何在QuickButton.vue中访问子组件的ref表单值

步骤1：在子组件EmployeesMainData中正确暴露数据 #

首先需要在EmployeesMainData的<script setup>里声明email和password的响应式变量，并用defineExpose把它们暴露给父组件：

<script setup>
import { ref } from 'vue'

// 声明响应式变量
const email = ref('')
const password = ref('')

// 暴露给父组件
defineExpose({
  email,
  password
})
</script>

步骤2：在父组件QuickButton.vue中绑定子组件并访问数据 #

给EmployeesMainData组件添加ref属性，然后在signUp方法中通过这个ref实例访问子组件暴露的变量：

<template>
  <Tabs>
    <TabPanels>
      <!-- 添加ref属性 -->
      <TabPanel><EmployeesMainData ref="mainDataRef"/></TabPanel>
      <TabPanel><ContactAddressData/></TabPanel>
      <TabPanel><EmploymentData/></TabPanel>
      <TabPanel><AdditionalData/></TabPanel>
    </TabPanels>
    <div>
      <button type="submit" @click="signUp">Save</button>
    </div>
  </Tabs>
</template>

<script setup>
import { ref } from 'vue'
import EmployeesMainData from './EmployeesMainData.vue'
// 导入其他子组件...

// 声明子组件的ref实例
const mainDataRef = ref(null)

const signUp = () => {
  // 访问子组件暴露的响应式数据
  const userEmail = mainDataRef.value?.email?.value
  const userPassword = mainDataRef.value?.password?.value
  
  console.log('Email:', userEmail)
  console.log('Password:', userPassword)
  
  // 后续提交逻辑
}
</script>

常见问题排查 #

如果仍无法访问数据，检查以下几点：

• 子组件是否在<script setup>中用defineExpose正确暴露了email和password，且这两个变量是用ref声明的响应式变量
• 父组件是否给EmployeesMainData添加了ref属性，且声明了对应的mainDataRef变量
• 确认调用signUp时子组件已完成挂载（避免在组件未渲染时尝试访问）

更优方案：提升状态到父组件 #

直接访问子组件数据虽可行，但不符合Vue单向数据流原则，更推荐将表单状态提升到父组件，通过v-model传递给子组件：

父组件修改： #

<template>
  <Tabs>
    <TabPanels>
      <TabPanel>
        <EmployeesMainData 
          v-model:email="formData.email" 
          v-model:password="formData.password"
        />
      </TabPanel>
      <!-- 其他子组件 -->
    </TabPanels>
    <div>
      <button type="submit" @click="signUp">Save</button>
    </div>
  </Tabs>
</template>

<script setup>
import { reactive } from 'vue'

// 父组件统一管理表单状态
const formData = reactive({
  email: '',
  password: ''
})

const signUp = () => {
  console.log('Email:', formData.email)
  console.log('Password:', formData.password)
  // 提交逻辑
}
</script>

子组件修改： #

<template>
  <div class="col-span-6 sm:col-span-4">
    <label for="email-address" class="block text-sm font-medium text-gray-700">Email address</label>
    <input 
      id="email-address" 
      :value="email"
      @input="$emit('update:email', $event.target.value)"
      type="email" 
      autocomplete="email" 
      required
      class="appearance-none rounded-md relative block w-full my-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
      placeholder="Email address"
    >
    <p class="mt-2 text-sm text-gray-500">*Required</p>
  </div>
  <div class="col-span-6 sm:col-span-4 mb-2">
    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
    <input 
      id="password" 
      :value="password"
      @input="$emit('update:password', $event.target.value)"
      type="text" 
      required
      class="appearance-none rounded-md relative block w-full my-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
      placeholder="Password"
    >
    <p class="mt-2 text-sm text-gray-500">*Required</p>
    <p class="mt-2 text-sm text-gray-500">*Password is used for employee to login into their Android app. Save and share the password to the employee.</p>
  </div>
</template>

<script setup>
defineProps(['email', 'password'])
defineEmits(['update:email', 'update:password'])
</script>

这种方式让数据流向更清晰，父组件统一管理表单状态，避免了直接操作子组件实例的耦合问题。

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