Vue 在刀片模板内插入道具

Question

我有一个安装在blade/laravel 上的Vue3 应用程序。在一个刀片模板中，我有一个 Vue3 组件（zest-dropzone），我在其中插入了一个插槽：

<template>
...

<slot name="hits" :button-label="buttonLabel" :files="files" :type="type" :state="state"></slot>
</template>

<script>
...
</script>

在刀片模板内，我有以下内容：

<zest-dropzone
    accepted-files=".psd,application/pdf,audio/*,image/*,video/*"
    button-label="{{ Lang::get('admin/button.edit') }}"
    categories="{{ json_encode($categories) }}"
    type="files">
    <template #hits="hitsProps">
      @{{ hitsProps.type }}
      <zest-dropzone-files-preview :hitsProps="hitsProps" :button-label="buttonLabel" :files="files" :type="type" :state="state"></zest-dropzone-files-preview>
    </template>
</zest-dropzone>

ZestDropzoneFilesPreview 是另一个在全局注册的组件，并且从技术上讲是在页面上呈现的，但是无论我如何尝试，道具都永远不会出现。

在刀片模板中，@{{ attemptsProps.type }} 正确渲染，并且值类型存在于 hitProps 上，但是当我尝试将其传递到下一个组件时，它不会通过，并且我在 ZestDropzoneFilesPreview 中未定义.

有谁知道如何处理这个问题吗？谢谢。

Answer 1

修复了这个问题，道具没有相应地传递（hitsProps -> attempts-props）。