VUE3,typeScript,props值传递

Question

vue3，table多选，选择某一条数据，弹出对话框，再打开对话框的时候有值传进来，但是获取不到咋回事

   <!-- 分配弹窗 -->
     <distributes  :clueIds="clueId" ref="distributeRef"/>

const clueId = ref<number[]>([]);// 线索id

const handleSelectionChange = (val: ClueDistributeVO[]) => {
  clueId.value = []
  for(let i = 0; i < val.length; i++){
    clueId.value.push(val[i].clueId)
  
  }
  
}
-----------------------------------------------------
const props = defineProps({
  clueIds: {
    type: Array
  }
})
const formData = ref({
    salePersonId: undefined,
    clueList: props.clueIds,
})
/** 打开弹窗 */
const open =  (type: string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
 
}
const submitForm = async () => {
  
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ClueDistributeVO
      await ClueDistributeApi.createClueDistribute(data)
      message.success(t('common.createSuccess'))
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
```typescript

Answer 1

引自免费微信小程序：皆我百晓生

根据你的描述和代码片段，问题似乎在于你尝试通过props传递值到子组件distributes，然后在打开对话框时，你希望这些值能够被正确地获取和使用。然而，你在传递clueIds时遇到了困难。这个问题可能有几个原因：

1. props的值在组件初始化后才被赋值：Vue组件的props在组件初始化时就会被评估，如果你在组件初始化后才改变props的值（比如通过异步操作），那么子组件可能无法获取到最新的值。你需要确保在组件初始化时props的值就已经被正确设置。
2. props值的类型定义可能不正确：你在定义props时指定了类型为Array，但没有指定具体的数组元素类型。在TypeScript中，这可能会导致类型推断的问题。你可以尝试更详细地定义props的类型。

下面是一些可能的解决方案：

解决方案一：确保初始化时props的值已经被设置

确保在组件初始化时clueIds已经被赋值。你可以在Vue组件的created或mounted生命周期钩子中设置它。

解决方案二：使用Vue的自定义事件来传递值

你可以在父组件中使用自定义事件来传递选中的clueIds到子组件。当选择发生变化时，触发这个事件并传递clueIds作为参数。子组件可以监听这个事件并更新其props的值。

解决方案三：更详细地定义props的类型

更详细地定义props的类型，以确保TypeScript能够正确地推断其类型。例如：

const props = defineProps({
  clueIds: {
    type: Array,
    required: true,
    default: () => [] as number[] // 确保初始化为数字数组
  }
});

关于代码的建议

在提交表单的函数中，你应该确保表单数据的有效性，例如通过表单验证来确保clueList字段不为空或有有效的值。此外，当你使用异步函数时，确保处理可能的错误和异常情况。

总结和示例代码（可能需要根据你的实际代码结构进行调整）

假设你使用第一种解决方案并确保初始化时props的值已经被设置，以下是修改后的示例代码：

父组件：

<template>
  <!-- 分配弹窗 -->
  <distributes @updateClueIds="handleUpdateClueIds" /> <!-- 添加一个事件监听器来更新clueIds -->
</template>

<script lang="ts">
import { ref } from 'vue';
import Distributes from './Distributes.vue'; // 导入子组件

export default {
  components: { Distributes }, // 注册子组件
  setup() {
    const clueId = ref<number[]>([]); // 线索id的引用
    const handleSelectionChange = (val: ClueDistributeVO[]) => { /* ... your existing code ... */ }; // 保持不变
    const handleUpdateClueIds = (newClueIds: number[]) => { // 处理从子组件传递过来的新的clueIds
      clueId.value = newClueIds; // 更新线索id的引用值
    }; // 注意这里的事件名应与子组件中触发的事件名相匹配（如updateClueIds）
    // 其他代码保持不变...
  },
};
</script>

子组件（Distributes）：

确保你已经正确地接收并使用了props，并在需要的时候触发自定义事件来更新父组件中的clueIds。你可能还需要添加一些逻辑来处理用户选择和取消选择的操作。这里只是一个大致的示例：

<template> /* 你的模板代码 */ </template>

<script lang="ts">
import { defineProps, emit } from 'vue'; // 导入必要的Vue函数和类型定义等... /* 你的其他代码 */ const props = defineProps({ /* 你的props定义 */ }); /* 你的其他代码 */ const handleSelectionChange = (selectedClues: ClueDistributeVO[]) => { // 当选择变化时触发的函数 // 在这里处理选择的变化并调用emit函数触发自定义事件传递给父组件 }; /* 你的其他代码 */ </script> /* 确保在需要的时候调用emit('updateClueIds', updatedClueIds)来传递更新的线索ID数组 */ /* ...你的其他代码 */ </vue> ``` 请根据你的实际情况调整这些代码片段，并确保所有的逻辑和类型定义都符合你的项目需求。如果你还有其他问题或需要进一步的帮助，请告诉我具体的错误消息或问题详情。