将图像源传递到 Vue.js 中的作用域插槽答案

【问题标题】：Passing an image source to a scoped slot in Vue.js将图像源传递到 Vue.js 中的作用域插槽
【发布时间】：2020-11-13 16:43:09
【问题描述】：

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

我不知道如何在插槽内将图像源传递给<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 设置得很好，并且在我将预览移动到插槽之前它确实工作得很好。

【问题讨论】：

文件 Blade.Php、Blade.php 或 blade.php（如果文件名的大小写很重要） )?它有标准名称吗？该文件的实际名称是什么？
刀片文件为edit.blade.php，vue文件为image-upload.vue。他们似乎合作得很好，因为除了 slot
imagePreview 是一个 url 还是一个对象？
imagePreview 是一个 url - 确切地说是 base64

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

您可以通过以下方式接收插槽道具：

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

【讨论】：