Vue.js 3中如何在组件间传递UniqueID并提交数据

方案1：子组件emit事件传递ID，父组件统一收集 #

这种方式步骤清晰，适合需要手动管理ID集合的场景，调试起来也更直观。

第一步：改造unique-id组件，生成ID后向父组件触发事件 #

<!-- UniqueId.vue -->
<template>
  <!-- 可根据需求选择显示或隐藏ID -->
  <span v-if="showId" class="uid-label">{{ uniqueId }}</span>
</template>

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

// 定义props，给每个实例唯一标识，方便父组件区分不同ID
const props = defineProps({
  instanceKey: {
    type: String,
    required: true
  },
  showId: {
    type: Boolean,
    default: false
  }
})

// 定义emit事件，用于向父组件传递生成的ID
const emit = defineEmits(['id-generated'])

const uniqueId = ref('')

onMounted(() => {
  // 生成唯一ID，这里用时间戳+随机数实现，也可以用uuid库生成更标准的ID
  uniqueId.value = `uid-${Date.now()}-${Math.floor(Math.random() * 1000)}`
  // 把实例标识和对应的ID一起传给父组件
  emit('id-generated', props.instanceKey, uniqueId.value)
})
</script>

第二步：在BasicItem-page组件中收集ID并与表单数据一起提交 #

<!-- BasicItemPage.vue -->
<template>
  <FormKit type="form" @submit="handleFormSubmit">
    <!-- 多个unique-id实例，每个传入不同的instanceKey -->
    <UniqueId instance-key="main-item-uid" />
    <UniqueId instance-key="sub-item-uid" />
    
    <!-- 其他表单字段 -->
    <FormKit type="text" label="项目名称" v-model="formData.name" />
    <FormKit type="textarea" label="项目描述" v-model="formData.desc" />
    
    <FormKit type="submit" label="提交表单" />
  </FormKit>
</template>

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

// 初始化表单数据，预留存储ID的字段
const formData = ref({
  name: '',
  desc: '',
  uids: {}
})

// 接收子组件传递的ID，存入表单数据对象
const handleIdGenerated = (key, id) => {
  formData.value.uids[key] = id
}

// 表单提交处理逻辑
const handleFormSubmit = async (submitData) => {
  // 合并FormKit提交的基础数据和收集到的所有ID
  const finalSubmitData = {
    ...submitData,
    uids: formData.value.uids
  }
  
  // 替换为你的后端提交逻辑
  console.log('最终提交数据:', finalSubmitData)
  // await fetch('/api/submit-item', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(finalSubmitData)
  // })
}
</script>

方案2：将unique-id绑定为FormKit隐藏字段（更贴合FormKit流程） #

这种方式无需手动收集ID，FormKit会自动把ID包含在表单提交数据中，代码更简洁。

改造unique-id组件，渲染FormKit隐藏字段 #

<!-- UniqueId.vue -->
<template>
  <!-- 用FormKit隐藏字段存储ID，提交时自动携带至表单数据 -->
  <FormKit
    type="hidden"
    :name="props.fieldName"
    :value="uniqueId"
  />
  <!-- 可选：显示ID用于调试 -->
  <span v-if="showId" class="uid-label">{{ uniqueId }}</span>
</template>

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

const props = defineProps({
  // 指定该ID对应的表单字段名
  fieldName: {
    type: String,
    required: true
  },
  showId: {
    type: Boolean,
    default: false
  }
})

const uniqueId = ref('')

onMounted(() => {
  uniqueId.value = `uid-${Date.now()}-${Math.floor(Math.random() * 1000)}`
})
</script>

在BasicItem-page组件中使用 #

<!-- BasicItemPage.vue -->
<template>
  <FormKit type="form" @submit="handleFormSubmit">
    <!-- 多个unique-id实例，每个指定不同的fieldName -->
    <UniqueId field-name="mainItemUid" />
    <UniqueId field-name="subItemUid" />
    
    <FormKit type="text" label="项目名称" v-model="formData.name" />
    <FormKit type="textarea" label="项目描述" v-model="formData.desc" />
    
    <FormKit type="submit" label="提交表单" />
  </FormKit>
</template>

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

const formData = ref({
  name: '',
  desc: ''
})

const handleFormSubmit = async (submitData) => {
  // 此时submitData中已自动包含mainItemUid和subItemUid字段，直接提交即可
  console.log('提交数据:', submitData)
  // 后端提交逻辑
}
</script>

关于组合式函数的补充 #

你之前尝试的组合式函数可以用来封装ID生成逻辑，但需要配合emit或FormKit字段完成数据传递，示例如下：

// useUniqueId.js
import { ref, onMounted } from 'vue'

export function useUniqueId() {
  const uniqueId = ref('')
  
  onMounted(() => {
    uniqueId.value = `uid-${Date.now()}-${Math.floor(Math.random() * 1000)}`
  })
  
  return { uniqueId }
}

在unique-id组件中使用：

<script setup>
import { useUniqueId } from './useUniqueId'
const { uniqueId } = useUniqueId()
// 之后依然需要通过emit传递给父组件，或者绑定到FormKit隐藏字段
</script>

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