Question

我将<slot name="success-mark">传递给子组件，如下所示。

<vue-dropzone ref="myVueDropzone"
  id="dropzone"
  :options="dropzoneOptions">
  <slot name="success-mark"><i class="fa fa-trash"></i></slot>
</vue-dropzone>

并且我的子组件具有以下函数，该函数返回上面提供的模板slot。

setPreviewTemplate(){
  return `
            <div class="dz-preview dz-file-preview">
                <div slot="image" class="dz-image" style="width: ${this.options.thumbnailWidth}px;height: ${this.options.thumbnailHeight}px">
                <img slot="thumbnail" data-dz-thumbnail /></div>
                <div slot="details" class="dz-details">
                    <div slot="size" class="dz-size"><span data-dz-size></span></div>
                    <div slot="name" class="dz-filename"><span data-dz-name></span></div>
                </div>
                <div slot="progress" class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                <div slot="error-message" class="dz-error-message"><span data-dz-errormessage></span></div>
                <div class="dz-success-mark" slot="success-mark"><i class="fa fa-check"></i></div>
                <div slot="error-mark" class="dz-error-mark"></div>
            </div>
        `;
}

我尝试了多种方法来改变slot - success-mark，但没有运气。

预期行为

子组件应显示fa fa-trash，即垃圾图标。

实际行为

子组件没有将插槽success-mark更改为fa fa-trash它保持默认为fa fa-check，即检查图标。

乱七八糟的地方？

Answer 1

将子模板更改为

<slot name="success-mark"></slot><i class="fa fa-trash"></i>

应该允许展示fa-trash（至少使用非动态模板，它可以工作）

出于好奇，你能否告诉你如何使用setPreviewTemplate（）的结果？如果我理解正确，这是一个孩子填充它自己的插槽（不是父提供插槽内容）。或者是'并且我的子组件有以下函数'一个拼写错误，你想说'和我的父组件......'？

编辑＃1

在仔细阅读了源代码vue-dropzone之后，我想到了一个想法（但可能不是你想要处理它的方式） - 将图标添加到dropzoneOptions。

setPreviewTemplate(){
  return `
    <div class="dz-preview dz-file-preview">
       ...
       <div class="dz-success-mark" slot="success-mark">
         <i class="fa" :class="this.options.icon"></i>
       </div>
       ...
}

编辑＃2

如果我完全误解了，请原谅我，但看起来你的语法方法错了。
<slot>应该在孩子身上，所以我希望在setPreviewTemplate（）返回的值中看到它。
父提供了一些应该具有slot属性的内容，所以也许

<vue-dropzone ref="myVueDropzone"
  id="dropzone"
  :options="dropzoneOptions">
  <i class="fa fa-trash" slot="success-mark"></i>
</vue-dropzone>

和

setPreviewTemplate(){
  return `
    <div class="dz-preview dz-file-preview">
       ...
       <slot name="success-mark"><i class="fa fa-check"></i></slot>
       ...
}

无法访问vue2中子组件的动态功能中的插槽

预期行为

实际行为

1 个答案: