问题标签 [svelte-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
3799 浏览

svelte - 从 HTML 字符串渲染 Svelte 组件

我只是在为即将到来的项目研究 Svelte 框架。

我想知道(因为这是项目要求)是否可以从服务器加载一些 HTML 字符串(使用 fetch api)并将其动态插入到 Svelte 组件中。

似乎可以使用{@html my_html_string}. 有没有办法在 HTML 字符串中包含实际 Svelte 元素的标签?

例如

我在想这可能通过将组件变成自定义元素(或其他东西)来实现,但我还没有设法完成这项工作(可能是因为我对框架还不够了解)。

有谁知道这是否真的可能?

0 投票
2 回答
895 浏览

reactjs - 如何合并 ReactJS 项目 svelte?或者如何将 .svelte 文件插入到 ReactJs 项目中?

如何合并node_moduleSvelte 和 ReactJs 的项目依赖项?

我看过指南展示了如何将 ReactJS 文件包含到 Svelte 应用程序中

这会产生以下错误:

构造函数不是构造函数错误

0 投票
1 回答
45 浏览

svelte - 组件差异

这个问题可能是一个简单的问题。

假设以下 Svelte 组件:

其中 A 和 B 是其他 Svelte 组件。问题是:

  • B与 A 有手术差异吗?
  • A 完全被 B 取代了吗?

出现此问题的用例有两个:

  • 如前所示,可以使用分支来实现穷人路由。当路由组件足够相似时,最小化它们之间的更新是很有趣的
  • 我有一个案例,其中 B 是 A,但我不确定是让编译器完成它的工作还是使用带有额外参数的父组件来编码 A 和 B 之间的变化:
0 投票
2 回答
3028 浏览

svelte - 在 Svelte 中调用 javascript 函数和渲染元素

如何在 Svelte 代码中添加自定义函数调用?例如。在 DataTableTest.svelte 中,我想添加 cellFormatter 函数并使其自动调用并在 . 以下是代码:

ABC.svelte

DataTableTest.svelte

我试了一下

但这不起作用?有人能告诉我在这里怎么做吗?

0 投票
1 回答
406 浏览

svelte - 苗条的组件不刷新

我正在与 svelte 合作开展个人项目(springboot + svelte + heroku)。我很难理解为什么在尝试重新显示组件时组件不刷新:

这是一个要点:https ://svelte.dev/repl/a69ac7502677400081122453aa45dfbb?version=3.7.1

第一个app显示组件首先点击【前进】显示组件其次。但是然后单击 [backward] 不会像我预期的那样带回组件 First。

我的总体想法是使用 svelte 来管理面向标签的应用程序:每个标签都是一个组件和子组件。单击选项卡将显示和隐藏选项卡组件。即使它对第一个选项卡更改效果很好,但接下来会失败。

我很确定有可能得到这样的行为,但我想我一定误解了一些东西......

有人可以解释我吗?

谢谢

0 投票
1 回答
124 浏览

javascript - 运行关于属性更改的查询

我对苗条很陌生,还没有完全了解绑定和更新。

我的组件应该在每次jobId属性更改时查询服务器,但我似乎无法弄清楚如何。

问题是它当然不会在更改query时调用该函数jobId,我明白为什么它没有。但我不知道如何解决它。我尝试使用beforeUpdate,但这似乎不对

0 投票
1 回答
190 浏览

javascript - 创建一个像 svelte:head 一样工作的全局 svelte-component

在我目前的项目中,我正在使用一个自行开发的模块系统,其中各个模块也应该可以通过在<navbar:extend>标签内简单地编写一些 HTML 来扩展例如导航栏。

如果有一种方法可以用与<svelte:head>标签一样少的文字来完成它,那将是很酷的。

0 投票
2 回答
5259 浏览

javascript - 如何使用 svelte 获取远程 API?

我正在从 API 获取报价,并且获取似乎有效,因为第一个console.log被正确调用,但第二个不是。内容是json来自 API 的对象中的一个字段。

0 投票
2 回答
3033 浏览

web-component - 如何使用嵌套组件创建和样式化 3 个自定义元素?

我正在尝试在 svelte 3 中创建自定义元素(Web 组件)。我找不到任何方法来设置 CSS 中嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前移除样式。

问题是我想在我的根元素中有嵌套组件。例如:

  • RootComponent(苗条的自定义元素)
    • (进口)FooComponent
    • (进口) BarComponent

如此处所述:svelte-custom-element

导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.

使用此选项设置嵌套组件按预期工作并注入到根的元素 ShadowDOM。问题是styles嵌套组件中定义的组件没有被注入。此问题的解决方法是将它们<style>作为 ShadowDom 中的全局样式注入到 root 的元素中。(Un) 幸运的是,当自定义元素尚不存在时,svelte 会在编译期间自动删除所有未使用的样式。

我的目标是使用 svelte 创建 Web 组件,然后在 svelte 之外将其用作本机 Web 组件。

这里是REPL

正如Conduitry所写的那样,自定义元素在 REPL 上并不真正起作用:

REPL 中的编译器选项实际上不会影响运行的代码,只会影响显示的代码。因此启用 customElement > 并不意味着您正在构建和运行 Web 组件

所以它更像是一个代码示例而不是一个工作示例。

  1. 我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
  2. 有没有办法禁用删除未使用的 css?

https://imgur.com/a/zZia566

from<div class="nested">启动从 Nested.svelte 导入的嵌套组件。

<style>元素应该.nested注入类,但它被 svelte 编译器删除。

0 投票
1 回答
1233 浏览

javascript - 何时使用 Svelte 的 use:action 与 onMount 和 onDestroy?

如果我们有一个Tooltip类之类的东西,它需要实例化一个实例,更新该实例,并与组件的安装、更新和销毁时间同步销毁该实例(如下面的代码所示),似乎有两种模式这样做。

  1. 使用use:action
  2. 使用onMountonDestroy

use:action方法看起来更简洁,但除此之外,这两种方法之间是否存在任何潜在差异,在某些情况下会使一种方法优于另一种方法?

使用示例use:action

使用onMountand的例子onDestroy