问题标签 [svelte-component]

我有一个#each 块，显示图像和文本。如果用户单击一个按钮，我想在该特定图像上显示一个组件，而不是所有图像。现在，我有类似下面的内容，所以#if loading，显示 LoadingSpinnger 组件。这会显示在所有图像上，而不仅仅是单击的图像。有没有办法在 div 中添加组件，使其不适用于所有图像？

调用 new Component({ target }) 将组件附加到目标，我想用新组件替换目标的所有旧内容。我怎样才能做到这一点？

为一个新项目尝试 svelte 我编写了一个组件来编辑一个复合对象，它将单个部件的编辑委托给子组件，并在部件更改时重新创建复合对象。当然，当复合对象被外部更改时，应将子组件更新为新值。

我最终得到以下结果：

以上编译但内容无法编辑，因为当item编辑第一个反应块时，将变量设置回holder.item.

我不明白以下内容：

• 为什么执行第一个反应块？由于item仅出现在分配的左侧，它不是它所依赖的值。
• 为什么循环依赖对编译器“隐藏”，为什么以下工作不起作用？

• 为什么将两个反应块包装成函数时一切正常？

依赖编译器以某种方式看不到代码在做什么似乎很奇怪，所以我想知道我是否有一个完全错误的方法。

我有一个像<select>这样的activity.status ：

$:console.log(activity.lead)每次<select>更新.

但是一旦我使用<Dropdown/>它，它就会触发两次。这是组件：

我对 svelte 的了解不多，但我研究了 API 并在 stackoverflow 上进行了搜索。我唯一没有尝试的是发出自定义事件。但这似乎有点额外的代码和不雅致。我不介意双重更新，但它似乎很愚蠢。所以我想知道：为什么会这样？我应该发出自定义事件吗？还是我犯了一些基本错误？

谢谢你，菲利普

当它不在组件中时，我使用了 bind:group 复选框。现在，当我尝试使用标签制作复选框时，它不起作用。

CheckboxWithLabel.svelte（组件）

SettingsSession.svelte（页面）

一个在没有组件的情况下使用 bind:group 的简短示例。

资料来源：https ://www.freecodecamp.org/news/the-svelte-handbook/#svelte-lifecycle-events

我需要的是async-await在 Svelte中使用onMount()。

或者，也许您可​​以建议我出了什么问题以及我可以使用什么。

重现

1. 去这里：https ://svelte.dev/repl/000ae69c0fe14d9483678d4ace874726?version=3.23.0
2. 打开控制台
3. 点击按钮
4. 你应该看到消息："Mounting..."和"A lot of background work..."
5. 如果再次单击，则不会写入销毁消息

为什么？

onMount()承认async功能承诺了吗？应该是？

我需要这种行为，因为我需要在渲染组件之前async等待。function lazyLoading()Child

在 Svelte 中是否有其他方法可以做到这一点？

我是 Svelte 的新手，我很喜欢它！制作一个带有几块 UI 和共享状态的单组件应用程序非常有趣和简单（需要具备 HTML、CSS 和 JS 的中级知识以及 React 的初学者知识）。

然而，最终，我希望制作更复杂的应用程序，这些应用程序将涉及大量输入和状态，所以很明显，我需要了解如何在组件之间使用状态。

但是，我对制作自定义输入组件和在其他地方最好地使用状态的最佳方法感到有些困惑。具体来说，我希望创建一个自定义样式的input type="range"组件并在父级中使用它。

在写这个问题的过程中，我确实找到了一种似乎可行的方法，但是我在文档或谷歌搜索中找不到与这种情况完全匹配的东西，所以我不确定我的解决方案。这是我想出的：https ://github.com/arrowtype/svelte-slider/ 。

我的解决方案总结

我从 SvelteJS 模板 ( https://github.com/sveltejs/template ) 开始。

我App.svelte的是这样的：

是这样SimpleSlider.svelte的：

在我的测试中，这似乎有效。但是，我发现到达那里很困难，我不确定这是否是最佳实践。

我应该做更多的事情，比如使用svelte/store模块来处理全局状态（如果没有，我什么时候开始需要它）？

我正在尝试https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql伙计们完成的令人惊叹的工作。

直到今天的问题，一切都很好。

我正在使用下面的代码，它给了我这个错误：

代码：

你能提出什么问题吗？

如果我使用它就可以await()了onMount()！像这样：

这里的代码@urql/svelte：

1. query.ts：https ://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/operations/query.ts
2. context.ts：https ://github.com/FormidableLabs/urql/blob/master/packages/svelte-urql/src/context.ts

也许是context代码？

如果您需要，我可以在 CodeSandbox 上创建一个 REPL，没问题。

错误@urql/svelte：https://github.com/FormidableLabs/urql/issues/795。

有关您的 Svelte 项目的信息： - Chrome 83 - Svelte 版本：3.23.0 - 汇总

我有一个模态组件，我希望能够在用户单击 x 按钮时将其销毁，我还有一个通知弹出窗口，它会在一段时间后自行销毁，但我想让用户能够关闭它x按钮也是。我知道我可以将事件传递给组件，但我认为如果组件是自毁的会更好。对于这种情况，可能还有更好的设计，但这就是我的想法，其他指针将不胜感激。

类似于如何绑定使用 Svelte let 指令声明的变量？，但该问题是由一个 Svelte 错误引起的，该错误现在显然已修复 - 这发生在最新可用的 Svelte 3.23.0 上。

我正在使用 Svelte 和yrv 路由器。我希望能够访问router组件内的变量，特别是slug参数。

当我构建它时，Svelte 抱怨说：

ValidationError：无法绑定到使用 let: 指令声明的变量

如何访问router组件中的参数？