Vue.js中如何跨组件获取兄弟组件内的表单字段值？

嘿，我懂你那种想要像jQuery一样直接“抓”到兄弟组件值的爽感——确实，刚从DOM操作转Vue组件化的时候，会觉得官方推荐的一些方式有点繁琐，但其实有更贴合Vue设计思想的简洁方案，完全不用事件总线或者硬啃$parent.$refs。

核心思路是让父组件统一管理兄弟组件的状态，毕竟Vue的核心是数据驱动，而不是跨组件硬取DOM或数据。具体做法分两步：

1. 给loginFields组件加上双向绑定能力 #

把loginFields内部的输入框值和组件的外部状态绑定起来，让父组件能直接拿到表单数据。以Vue 3的<script setup>为例：

<template>
  <div>
    <!-- 用户名输入框 -->
    <input 
      id="userLoginField"
      type="text" 
      v-model="localForm.username"
      @input="syncForm"
    >
    <!-- 密码输入框 -->
    <input 
      id="passwordLoginField"
      type="password" 
      v-model="localForm.password"
      @input="syncForm"
    >
  </div>
</template>

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

// 接收父组件传来的初始表单数据
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ username: '', password: '' })
  }
})

// 组件内部维护表单状态
const localForm = ref({ ...props.modelValue })

// 同步表单数据到父组件
const syncForm = () => {
  $emit('update:modelValue', localForm.value)
}
</script>

如果是Vue 2，就用value prop + input事件来实现双向绑定，原理是一样的。

2. 父组件统一管理状态，提交时直接拿值 #

在父组件里，用一个响应式变量存表单数据，绑定给loginFields，然后提交按钮的点击逻辑直接从这个变量里取数据就行：

<template>
  <div class="login-container">
    <loginFields v-model="loginForm"></loginFields>
    <submitButton @click="handleLogin"></submitButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import loginFields from './loginFields.vue'
import submitButton from './submitButton.vue'

// 父组件维护的表单状态
const loginForm = ref({ username: '', password: '' })

// 提交逻辑：直接拿值，不用找兄弟组件！
const handleLogin = () => {
  const { username, password } = loginForm.value
  console.log('要校验的用户名:', username)
  console.log('要校验的密码:', password)
  
  // 这里写你的字段校验、登录请求逻辑
}
</script>

如果你的submitButton组件需要自己处理提交逻辑，也可以把loginForm作为props传进去，组件内部直接用props.loginForm获取值，同样很方便。

为什么这比你说的两种方式好？ #

• 简洁度拉满：不用事件总线来回触发/监听事件，也不用$parent.$refs一层层找组件，数据流向清晰，父组件做枢纽，兄弟组件只需要和父组件交互。
• 符合Vue设计思想：所有状态都有明确的来源，完全基于响应式系统，不会出现DOM值和Vue状态不一致的问题，调试和维护都更简单。
• 扩展性强：以后要加邮箱、验证码字段？只需要在loginForm里加对应属性，loginFields里加输入框就行，组件间的通信逻辑完全不用改。

题外话：真要像jQuery那样硬取？（不推荐） #

虽然非常不建议破坏Vue的组件化边界，但如果你一定要通过ID直接拿DOM值，也可以用原生JS：document.getElementById('userLoginField').value。但这种方式完全脱离了Vue的响应式系统，很容易导致数据不同步的问题，比如用户输入了值，但Vue的状态没更新，后续逻辑出错，所以强烈不推荐。

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