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）。