问题标签 [vuejs-slots]

我有一个 Vue 3 应用程序和一个 StencilJS 组件库。我的一个 Stencil 组件之前使用了默认插槽，它与 Vue 配合得很好。现在我在我的 Stencil 组件中引入了命名槽，但是命名槽不再在 Vue 中工作。我知道 slot 属性已被弃用，所以我尝试了这个：

但是，它是空白的，因为没有呈现任何内容。现在我正在使用旧方法通过添加 Eslint 禁用来添加插槽，如下所示：

这是有效的，但我将不得不在任何地方添加禁用。我想以正确的方式去做。有人可以告诉我该怎么做吗？

我确实对 Vue 插槽有疑问。
如果我启动本地项目并npm run dev填充插槽的内容。但是，当我部署项目时，这两个插槽是空的。

为什么我一部署项目就没有加载槽内容？

插槽

DOM（本地和部署）

输出npm list vue：

我有一个基本组件，应该能够将多个文件上传到 Firestore。由于我希望能够在我的应用程序中的多个点上使用此组件，因此我想利用插槽，以便我可以更改覆盖隐藏输入标签的元素。所以无论是按钮、svg等，我还是希望输入触发点击事件。

目前，只有默认img标签可以触发@change事件。

我需要传递更多道具吗？我怎样才能使这项工作在我目前的状态下工作？

如果您需要更多信息，请告诉我！

干杯!

注意：我还没有让firestore上传的多个文件选择工作，但正在努力。

UploadMediaFiles.vue（子）

SelectAndPreviewFiles（父）

我正在尝试解析插槽的内容并在多个位置呈现内容。这个想法是创建一个允许每个步骤包含在单个组件中的向导。像这样的东西：

向导组件定义：

向导组件脚本

向导组件用法：

这里明显的问题是，一切都是 VNode，不能很好地呈现给 DOM。我试过使用render()，h()但那些似乎不是我想要的。还尝试了 v-html 绑定，但同样，这并不需要 VNode。

我不确定是否有更好的方法来做到这一点，或者我是否在这里遗漏了一些简单的东西，但我没有看到一种简单的方法来拆分插槽并将内容呈现在不同的位置。

我正在开发一个小型在线商店 (Vue.js) 我有几种名称和价格不同的产品。每个产品都有一个“详细信息”按钮。

当我单击“详细信息”按钮时，我希望出现一个包含该产品名称和价格的模式窗口。目前，我总是只显示第一个产品的数据。我不知道如何显示我点击的产品的数据。我大致了解您需要使用“this”，但到目前为止还没有解决方案。<slot></slot>我在 Modal 中使用 vue-js 。

在方法中：

我的按钮：

我尝试使用的组件是用 Vue2 编写的，并通过 NPM 作为 web 组件安装。我的新项目是在 Vue3 中创建的。

我正在尝试使用组件插槽，但它不起作用。

当我尝试以下操作时，我没有收到任何错误，但 webcomponent 的插槽内没有呈现任何内容：

当我尝试以下操作时，出现错误：error 'slot' attributes are deprecated vue/no-deprecated-slot-attribute

我无法更改或升级要使用的 Web 组件。如何在我的 Vue3 项目中使用它？

编辑：我应该澄清一下，webcomponent 正在使用用 Vue2 编写的旧项目，使用第二个示例。

嗨，我正在使用带有插槽的https://github.com/xwpongithub/vue-range-slider 插件piecewise

插槽内的任何内容都会piecewise多次附加

如下图所示

https://ibb.co/kcX2rpC

这是我的代码