我有一个Vue组件,它接受函数指针来执行删除操作.

<template>
  <q-card class="my-card" >
    <q-img :src="media.normal || media.original">
      <div class="absolute-bottom text-center">
        {{ media.title || 'No Title'}}
      </div>
    </q-img>

    <q-card-section>
      <div class="text-h6">{{ media.title}}</div>
    </q-card-section>

    <q-card-section class="q-pt-none">
      <q-btn @click="actionDelete(media.uuid)">Delete</q-btn>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue';
import { MediaItem } from 'src/data/mediaItem';

const props = defineProps({
  media: {
    type: Object as PropType<MediaItem>,
    required: true
  },
  actionDelete: {
    type: Function,
    required: true
  }
});
</script>

根据我在文档和教程中发现的内容,我正在将该函数从我的父组件传递给子组件:

<MediaItemComponent :media="media" :actionDelete="actionDelete(media.uuid)" />

然而. VueJs(或TypScript?)正在抱怨:

ERROR(vue-tsc)  Type 'void' is not assignable to type 'Function'.

我做错了什么?

推荐答案

类型错误显示代码错误.:actionDelete="actionDelete(media.uuid)"导致actionDeleteprops 是actionDelete调用的结果,在本例中是undefined,而props 预计是一个函数.不应该用同一参数调用actionDelete两次.

很少需要通过Vue中的props 传递回调,这是通过Vue事件处理的,这些事件在Devtools中更容易调试.

应该在父母身上:

<MediaItemComponent :media="media" @delete="actionDelete" />

在子元素身上:

<q-btn @click="$emit('delete', media.uuid)">

Typescript相关问答推荐

如何根据数据类型动态注入组件?

React Hook中基于动态收件箱定义和断言回报类型

如何推断类方法未知返回类型并在属性中使用它

在类型内部使用泛型类型时,不能使用其他字符串索引

typescript抱怨值可以是未定义的,尽管类型没有定义

接口的额外属性作为同一接口的方法的参数类型'

Angular 信号:当输入信号改变值时,S触发取数的正确方式是什么?

Typescript泛型类型:按其嵌套属性映射记录列表

在函数中打字推断记录的关键字

TS2339:类型{}上不存在属性消息

react 路由Use RouteLoaderData类型脚本错误

以Angular 自定义快捷菜单

如何 bootstrap TS编译器为类型化属性`T`推断正确的类型?

如何将别名添加到vitest配置文件?

使用TypeScrip5强制使用方法参数类型的实验方法修饰符

如何按属性或数字数组汇总对象数组

对有效枚举值的常量字符串进行常规判断

如何从接口中省略接口

使用Cypress测试从Reaction受控列表中删除项目

有没有一种方法可以防止我的组件包在其中安装样式组件'; node 模块中的s目录