传递给组件的函数 prop 在 Vue3 中未定义

Question

我遇到了一个问题，我希望子组件调用作为父组件提供给它的函数。我之前用其他组件做过，但用这个就行不通。

以下是我的父组件的相关部分：

<template>
  <DataTable
    :on-double-click="goToDevicePage"
  />
</template>

这是我的子组件的相关部分：

<template>
  <TableRow
    v-for="(row, index) in filteredRows"
    :key="row.id"
    @dblclick="() => handleDoubleClick(row)"
  />
</template>

<script setup lang="ts">
const props = defineProps<{
  onDoubleClick?: (cells: any[]) => void;
}>();

function handleDoubleClick(row: any) {
  const cells = row.getVisibleCells();
  if (props.onDoubleClick !== undefined) {
    props.onDoubleClick(cells);
    console.log("onDoubleClick is defined and called with cells:", cells);
  } else {
    console.log("onDoubleClick is undefined");
  }
}
</script>

这总是记录该函数未定义，我不确定为什么。

我尝试将父组件中的函数设置为箭头函数，如下所示：

:on-double-click="(cells: any[]) => goToDevicePage(cells)"

我还尝试过将子组件中的 prop 设置为 required ，打字稿没有给我任何错误，但它仍然记录其未定义，如果我删除检查，它只会抛出一个错误。我还尝试了一些方法，例如将 .prop 添加到父组件 prop 并删除 prop 名称中的“on”，因为 chatgpt 说 vue 可能认为它是一个事件侦听器，但实际上没有任何作用。

Answer 1

问题是，在 Vue 中，prop 名称会自动采用驼峰式命名，因此父组件中的 :on-double-click 会作为 onDoubleClick 传递给子组件。然而，在 Vue 的模板语法中，带有 on- 前缀的 props 被视为事件侦听器，而不是常规 props，因此它不会像您期望的那样传递到子组件。要修复此问题，请在父组件中进行以下更改：将 :on-double-click="goToDevicePage" 更改为 :onDoubleClick="goToDevicePage" - 以避免事件侦听器解释。通过在父级中将 on-double-click 重命名为 onDoubleClick，Vue 会将其作为标准 prop 传递，而不是将其视为事件。