问题标签 [renderless-component]

CodeSandbox: https://codesandbox.io/s/61my3w7xrw?fontsize=14

I have this renderless component that uses a scoped slot:

Using it like so:

... so the value is not updated on change. What am I doing wrong?

我在 JavaScript 中有一个无渲染组件，我正在尝试将其转换为 TypeScript。我在-ed 组件中声明render函数时遇到错误：Vue.extend

这是我在 TypeScript 中尝试做的一个例子：

我该如何解决？

我在 VueJS 中完成了一个无渲染组件，我尝试检测组件内部是否有一个带有 v-slot 的模板。目标是在下面的无渲染组件“Read”内有条件地渲染代码。例如，我需要的是，在第一种情况下，btn 被渲染是因为他有一个插槽，而在第二种情况下，btn 没有显示，因为没有带有 v-slot 的模板。

情况1

案例2

我试图在我的无渲染组件中查看 this.$attrs 或 this.$children，但我没有找到如何实现这一点。我知道我需要在我的无渲染组件的渲染方法中添加一个“if”，例如

我在 Vue 2 中构建了一个分页组件，使用无渲染模式将行为与呈现分开，并允许消费者编写自己的 UI ( https://adamwathan.me/renderless-components-in-vuejs/ )。

无渲染分页.js：

分页.jsx

这允许用户将他自己的模板传递给options.template从而覆盖默认模板：

我的分页.vue

然后将其与插件一起使用：

此代码在 Vue 3 上中断。这一次，scopedSlots 已与插槽统一。其次，将 h (CreateElement) 变量作为全局依赖项导入。但即使考虑了这些变化，我仍然无法找到可行的解决方案。

在 Vue 3 中重写此逻辑的最佳方法是什么？

我正在尝试在 vue 3 中构建一个无渲染组件，并希望将 ref 传递给默认插槽。

当我使用h渲染函数时，我可以传递一个 ref：

如果我尝试对默认插槽执行相同操作，则它不起作用：

有没有办法做到这一点而不将默认插槽包装到另一个 div 或类似的？

已经检查了文档和其他资源，但找不到任何解决方案。

我可以在没有 if/else 的情况下犯 3 种错误类型吗？

我需要显示 3 种类型的错误（它们有不同的位置）：

• 常见的
• 错误登录
• 错误密码

我现在拥有的：我做了一个无渲染函数。我看到了两种方式：

• 在组件的模板中使用 if/else：

  组件.vue

无渲染函数.vue

• 在无渲染函数中使用 if/else（我现在正在使用它）：

组件.vue

无渲染.vue：

},

我已经构建了一个无渲染的基本图标 Vue 组件，它只输出其插槽中的任何内容，但在插槽组件中添加了一些附加属性。我设置的属性之一是class="icon"允许我将所有图标的样式放在一个地方。

图标.vue

关闭图标.vue

然后我可以更轻松地创建许多不同的图标组件，例如这个关闭图标组件。

实际结果

问题是当我使用close-icon组件并设置class如下：

呈现的输出没有结合这两个类"icon foo"。

预期结果

如何确保该类不被覆盖而是附加到，以便输出为：

如果可能，应该对我所做的任何更改进行更改，Icon.vue并且我想避免更改，Close-Icon.vue因为还有大量其他图标。