问题标签 [svelte-component]

我在一个有多个项目的团队中工作，每个项目都是用不同的框架编写的。我们希望有一些独立的小部件，它们的行为和外观是标准的，但可以在任何系统中使用。我认为 Svelte 听起来是个不错的选择，因为它不需要在前端添加框架。但是我找不到任何说 Svelte 可以在其他系统中使用的东西。它必须是一个全 Svelte 应用程序才能拥有 Svelte 组件。

那是对的吗？或者有什么方法可以将 Svelte 组件嵌入到另一个系统中？

复制步骤：

• 在这里转到 REPL：https ://svelte.dev/repl/27a2cff81ebb4000970eee32747cc6c2?version=3.20.1

• 打开控制台

• 取消注释第 27 行 ( $: canSubscribe && $store)

预期：

我认为只有在为真$store时才能订阅（使用$:） 。canSubscribe

问题是：如果是假的，为什么要$store订阅？canSubscribe

我错了吗？

无论是svelte-apollo（https://github.com/timhall/svelte-apollo/issues/19）和@urql-svelte（https://github.com/FormidableLabs/urql/issues/704）我都会重新渲染整个列表只是一个元素重新渲染。

复制步骤：

• 转到 REPL：https ://codesandbox.io/s/urql-svelte-list-rerendering-uwsvn

• 点击一个按钮

• 每个按钮重新渲染；所以整个列表重新渲染自己

• 我希望它只重新呈现我单击的按钮

如果我在这里阅读：https://svelte.dev/tutorial/svelte-options，我可以通过以下方式理解：

immutable={true} - 你从不使用可变数据，因此编译器可以进行简单的引用相等检查以确定值是否已更改

immutable={false} — 默认值。Svelte 对于可变对象是否发生变化会更加保守

如果您看到示例，他们正在更改todos数组，就像我们也在做的那样urql：

为什么它不适用于我的 REPLtodos示例？

最后是todos一个新数组吗？

我编写了一个使用 Leaflet 显示地图的 Svelte 组件。该组件的以下代码有效。

我只是想知道这是否是这样做的方法，或者是否有“更正确”或“更智能”的方法？尤其是考虑到从 CDN 加载 CSS 的await import('leaflet');方式loadMap()和方式onMount()...

我一直在尝试使用 Svelte 从主网站创建一个简单的 Storybook 示例。不幸的是，当我尝试启动 Storybook 时，它只会给我以下错误：

我为 Storybook 编写的代码故意非常简单：

按钮只是一行：

<button>Hello</button>

我不确定这里可能出了什么问题，因为 Storybook 实例似乎期待组件返回（故事已经这样做了）。任何帮助将不胜感激！

我正在寻找一种方法来侦听来自 JavaScript（而不是on:语法）的另一个组件中的 Svelte 组件的调度事件。

这是我试图在 REPL 上实现的代码。

预期的行为是在单击按钮关闭 0时在控制台中显示0 ，其他的以此类推。

情况如下：

我有多个按钮来执行不同的异步功能。

都是进度按钮

我想要的是，当按下按钮时，标签会更改，指示功能的状态（功能名称、加载、完成或错误，如果需要的话）

一切正常，但文字没有改变

注意：目前我还没有实现所有四个功能，但一个应该可以工作

这是组件。

组件 1 - 容器

组件 1 - 按钮

如果你们给我看一下，我会很感激

我在我的 Svelte 应用程序中使用此代码：

在 Sapper 中尝试相同的代码我得到这个错误：

Cannot access 'myQuery' before initialization.

如果我更改以下行

• 由此：$: myQuery = query({

• 对此：const myQuery = query({

有用！

为什么？

我想创建一个使用/导入静态图像的苗条组件（基于 webpack）。如何确保图像被正确导出，即使用我的组件的苗条应用程序也能看到图像？

在我的组件中，我尝试导入图像并使用 webpack 的文件加载器：

和

这行得通，图像包含在 dist 文件夹中，但在这种情况下，我还需要向主 svelte 应用程序添加一个文件加载器，这是我想避免的额外要求。主应用程序应该只需要导入我的组件。

这是可能的还是上面已经推荐的方法？

我有这个组件，并且我想以状态驱动方式不可行的方式对其子元素进行一些操作。所以我想在querySelector其中使用一个语句和一个。但是我怎样才能将它的范围限定为元素呢？页面中有组件的多个实例，因此无法使用类或 id。我怎样才能做到这一点？

这是一个简化的代码：