Vue 在 blade 模板中插入道具

Question

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

<template>
...

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

<script>
...
</script>

在 blade 模板中，我有以下内容：

<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 是另一个在全球注册并在技术上呈现在页面上的组件，但是无论我尝试什么，道具都不会出现。

在 blade 模板中，@{{ hitsProps.type }} 正确呈现并且值类型存在于 hitsProps 上，但是当我尝试在下一个组件中传递它时，它不存在通过并在 ZestDropzoneFilesPreview 中得到未定义。

有人知道怎么处理吗？谢谢

Answer 1

已修复，道具未相应传递（hitsProps -> hits-props）。

Vue 在 blade 模板中插入道具

Vue slots props inside blade template

vue.js

laravel-blade