Vue中如何获取多个子组件值并在父组件执行指定功能

实现方案 #

这里提供两种主流的实现方式，可根据你的项目技术栈和实际场景选择： #

方案1：状态提升（推荐，通用性最强）

把三个渠道表单的所有字段状态统一存放在 Messaging Tool 父组件中，子组件只负责接收状态、回调更新事件，不维护自身状态。

• 父组件初始化每个渠道对应的表单默认值，通过props传递给对应子表单组件
• 子表单内字段发生变更时，调用父组件传入的onChange回调，实时更新父组件存储的表单数据
• 父组件点击「Save text」复选框、发送消息按钮时，直接读取本地存储的所有表单数据即可，不需要额外获取子组件值

React写法参考：

// 父组件 MessagingTool.jsx
import { useState } from 'react'
import SmsForm from './SmsForm'
import EmailForm from './EmailForm'
import AppPushForm from './AppPushForm'

const MessagingTool = () => {
  // 统一存储三个渠道的表单数据
  const [formData, setFormData] = useState({
    sms: { receiver: '', content: '' },
    email: { address: '', title: '', content: '' },
    appPush: { userId: '', content: '' }
  })

  // 通用更新方法
  const updateForm = (channel, field, value) => {
    setFormData(prev => ({
      ...prev,
      [channel]: { ...prev[channel], [field]: value }
    }))
  }

  // 导出CSV逻辑
  const handleSaveCsv = (e) => {
    if (e.target.checked) {
      // 直接使用formData里的所有字段生成CSV即可
      console.log('所有表单数据', formData)
    }
  }

  // 发送消息逻辑
  const handleSendMsg = () => {
    // 弹出确认框，确认后调用API，参数直接取formData
    if (window.confirm('确认发送消息？')) {
      // 调用发送接口
    }
  }

  return (
    <div>
      <SmsForm data={formData.sms} onChange={(field, val) => updateForm('sms', field, val)} />
      <EmailForm data={formData.email} onChange={(field, val) => updateForm('email', field, val)} />
      <AppPushForm data={formData.appPush} onChange={(field, val) => updateForm('appPush', field, val)} />
      <input type="checkbox" onChange={handleSaveCsv} /> Save text
      <button onClick={handleSendMsg}>发送消息</button>
    </div>
  )
}

子表单示例（以SmsForm为例）：

const SmsForm = ({ data, onChange }) => {
  return (
    <div>
      <input 
        value={data.receiver} 
        onChange={e => onChange('receiver', e.target.value)} 
        placeholder="收件人手机号" 
      />
      <textarea 
        value={data.content} 
        onChange={e => onChange('content', e.target.value)} 
        placeholder="短信内容" 
      />
    </div>
  )
}

方案2：子组件暴露取值方法（适合不想改造原有子表单状态的场景）

如果你的子表单已经自行维护了内部状态，不想把状态全部提到父组件，可以通过组件实例暴露获取表单值的方法，父组件通过ref调用该方法取值。

React写法参考（使用useImperativeHandle）：
子表单：

import { forwardRef, useImperativeHandle, useState } from 'react'

const SmsForm = forwardRef((props, ref) => {
  const [receiver, setReceiver] = useState('')
  const [content, setContent] = useState('')

  // 暴露方法给父组件调用
  useImperativeHandle(ref, () => ({
    getFormValues: () => ({ receiver, content })
  }))

  return (
    <div>
      <input value={receiver} onChange={e => setReceiver(e.target.value)} placeholder="收件人手机号" />
      <textarea value={content} onChange={e => setContent(e.target.value)} placeholder="短信内容" />
    </div>
  )
})

父组件：

import { useRef } from 'react'
const MessagingTool = () => {
  const smsRef = useRef()
  const emailRef = useRef()
  const appPushRef = useRef()

  const handleSaveCsv = (e) => {
    if (e.target.checked) {
      // 调用所有子组件的取值方法拿到数据
      const smsData = smsRef.current.getFormValues()
      const emailData = emailRef.current.getFormValues()
      const appPushData = appPushRef.current.getFormValues()
      const allData = { sms: smsData, email: emailData, appPush: appPushData }
      // 生成CSV即可
    }
  }

  return (
    <div>
      <SmsForm ref={smsRef} />
      <EmailForm ref={emailRef} />
      <AppPushForm ref={appPushRef} />
      <input type="checkbox" onChange={handleSaveCsv} /> Save text
      {/* 发送按钮逻辑同理，调用三个ref拿值即可 */}
    </div>
  )
}

如果是Vue项目，思路完全一致：

• 状态提升的话，父组件用v-model绑定子表单的字段即可
• 暴露方法的话，子组件用defineExpose暴露getFormValues方法，父组件通过ref调用即可

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