javascript - 将图像源传递到 Vue.js 中的作用域槽

Question

我迷路了，我已经阅读了有关插槽的文档并查看了一些示例，但现在不适合我。

我不知道如何将图像源传递给 <img :src="">在一个槽内。

相关 Blade.Php 文件:

<image-upload>
    <template v-slot:completed-crop-preview >
        <div class="mb-2 flex space-x-2">
            <img :src="image" class="mb-2 w-16 h-16 rounded-full border-como border-2 border-dashed"
            alt="picture upload preview">
        </div>
    </template>
</image-upload>

相关 Vue.js 模板:

<div>
    <slot name="completed-crop-preview" v-bind:image="imagePreview">
    </slot>
</div>

根据我的开发人员工具，imagePreview 设置得很好，在我将预览移动到插槽之前，这确实工作得很好。

Answer 1

您可以按如下方式接收插槽 Prop :

<image-upload>
    <template v-slot:completed-crop-preview="{image}" >
        <div class="mb-2 flex space-x-2">
            <img :src="image" class="mb-2 w-16 h-16 rounded-full border-como border-2 border-dashed"
            alt="picture upload preview">
        </div>
    </template>
</image-upload>