将函数从父级传递给子级，我也可以在 Vue/Nuxt 3 Composition API 中传递参数

Question

将函数从父级传递给子级，我也可以在 Vue/Nuxt 3 Composition API 中传递参数

父组件

</script setup>
<template>
  <div>
    <ChildComponent :handleButtonClick="handleButtonClick" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleButtonClick = (data) => {
  console.log('Button clicked in child component',data)
}
</script>

子组件

<template>
<button @click="handleButtonClick(1)">Click Me</button>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
handleButtonClick: {
  type: Function,
  required: true
}
})
</script>

在 child 中调用 fn 时遇到错误

TypeError：_ctx.handleButtonClick 不是函数

Answer 1

我相信你必须在

handleButtonClick

前面加上

props.

，如下所示：

<template>
  <button @click="props.handleButtonClick(1)">Click Me</button>
</template>

// remaining code as from question