个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我使用 Svelte 创建了简单的自定义 Web 组件。它已经被编译并且看起来应该可以正常工作，但是有困难。我试图将一些变量传递给 prop，但一直未定义，但如果我传递一些字符串
Result.svelte 组件
<svelte:options tag="svelte-result" />
<script>
export let result = {metadata: {}, transfers: []};
export let string = 'no string';
</script>
<div class="result__wrapper">
{string}
<div class="result__metadata">
<div>{result.metadata.offset}</div>
<div>{result.metadata.limit}</div>
<div>{result.metadata.total}</div>
</div>
</div>
当它被编译时，我正在使用它
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Svelte test</title>
<script defer src="/svelte/wapi-client/svelte-component.js"></script>
</head>
<body>
<div id="test"></div>
</body>
<script>
const data = {
metadata: {
limit: 20,
offset: 0,
total: 311301
},
transfers: [
{
amount: "7.95",
identifier: "9cd9901f-44a5-4436-9aef-880354bbe2e4"
}
]
};
document.getElementById('test').innerHTML = `
<svelte-result string="works" result=${data}></svelte-result>`;
</script>
</html>
data 变量未传递给组件，但字符串传递并正确显示...我做错了什么？如何将 data 变量传递给组件？
最佳答案
您不能将对象作为属性传递给自定义元素。您需要在传递对象之前对其进行字符串化。
index.html
...
document.getElementById('test').innerHTML = `
<svelte-result string="works" result=${JSON.stringify(data)}></svelte-result>`;
...
Foo.svelte
<svelte:options tag="svelte-result" />
<script>
export let result = {metadata: {}, transfers: []};
export let string = 'no string';
$: _result = typeof result === 'string' ? JSON.parse(result) : result;
</script>
<div class="result__wrapper">
{string}
<div class="result__metadata">
<div>{_result.metadata.offset}</div>
<div>{_result.metadata.limit}</div>
<div>{_result.metadata.total}</div>
</div>
</div>
关于javascript - 将变量传递给自定义 Svelte Web 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63072084/
27
4
0
我看了你的文章 https://svelte.dev/blog/virtual-dom-is-pure-overhead和其他一些博客，但它们解释了与虚拟 dom 相比，svelte 如何更好。而我想
我正在尝试制作一个 Svelte 应用程序，其中我有一个创建 audioSource 并管理它的类(不是 svelte 组件)。 我想跨多个组件获取此类实例。 现在，我发现的唯一方法是这样做:
我有一个案例，我打开了两个选项卡 localhost:5000/和localhost:5000/stream并想更新 / 中的变量路径并查看 stream 中的更改实时路径。存储不是这样工作的，如果我
我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。 我有以下 Svelte 组件 (App.svelte): let data; function h
我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。 我有以下 Svelte 组件 (App.svelte): let data; function h
我正在研究 Svelte，并从其 Github 存储库中克隆了它。我可以从站点目录运行 REPL，但它使用来自 unpkg url 的 Svelte。我想尝试我本地构建的编译器并使用它而不是 unpk
我想将样式添加到 在纤细路由中标记，但我不能。 我试图添加一个有一些样式的类，但它没有用。 该类包含: .link { text-decoration: none; } 有没有人对此有解决方案
目前，当我在浏览器中打开开发人员工具时，我可以看到我的原始 svelte 组件，我想隐藏此信息并仅发送丑陋的代码。 这是我打开开发者工具时得到的。我正在构建一个单页应用程序。 这是我的 rollup.
我目前正在学习 Svelte，我想为这个副项目创建一个身份验证流程。通常，在 React 中，我习惯使用 Contexts 保存身份验证信息。 我想知道 Svelte 是否也可以执行类似的
调用 new Component({ target }) 将组件附加到目标，我想用新组件替换目标的所有旧内容。我该怎么做？ 最佳答案 如果您正在混合服务器呈现的标记，最好使用 hydrate: tru
我有一个简单的 REPL example用于简单的列表详细信息编辑器。它由三个部分组成: Annotation是细节 Annotations遍历数据并创建 Annotation实例 App是创建 An
我正尝试在 Svelte 商店中维护实时股票报价，以便屏幕上的出价和要价实时更新。我不确定商店的结构如何来保持数据的 react 性和效率。数据来自 websocket，如下所示: {'symbol'
下面是一个非常简单的 Svelte 组件。 当您单击该按钮时，它会更新 pages[2].name。 Svelte 如何处理这个问题？它是否重新评估所有 3 个 DIV？或者它是否知道只修改第 3 个
我制作了一个用于输入财务数字的组件，用于我的输入表单。它现在工作得很好，除了一个奇怪的行为:当我点击输入字段时，它会按预期获得焦点，但是当它已经有焦点时点击它会带走焦点。 组件中只有一个 on:cli
我尝试实现一个自定义的 Svelte 商店，它允许我在订阅页面上“抛出”一个单一的状态对象。这是我准备的示例代码: import { derived, writable } from 'svelte/
我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情: npm 安装美人鱼 然后我得到以下内容: npm WARN svelte-app@1.0.0 No reposi
如何渲染使用 svelte.compile() 手动编译的组件？我正在编译这样的组件: import * as svelte from 'svelte/compiler'; var
我正在学习 Svelte 以及如何使用它制作自定义商店。我遇到了一个问题，当我尝试使用 update 更新可写数组时，它会在订阅该数组的组件中导致未定义的错误。 这是我的商店，我有一个简单的数组，其中
我正在尝试遍历数组以呈现具有 type 值的组件。 import One from './One.svelte'; import Two from './Two.svelte'; import
如何将数据(例如:导航栏标题)传递给父元素中使用的组件？ import Nav from "../components/Nav.svelte"; let navTitle = "MyApp
我是一名优秀的程序员,十分优秀！