将变量传递给自定义 Svelte Web 组件

Question

我使用 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 变量传递给组件？

Answer 1

您不能将对象作为属性传递给自定义元素。您需要在传递对象之前将其字符串化。

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>

Answer 2

作为使用 JSON.stringify 将数据传递给组件的替代方法，您可以将其作为属性而不是作为属性传递——换句话说，而不是这个...

document.getElementById('test').innerHTML = `
  <svelte-result string="works" result=${data}></svelte-result>`;

...你这样做：

document.getElementById('test').innerHTML = `
  <svelte-result string="works"></svelte-result>`;

document.querySelector('svelte-result').result = data;

当然不理想，因为这意味着您必须适应初始未定义状态和一旦 result 具有 post 初始化状态已经通过了，但是web components有点笨拙。

将变量传递给自定义 Svelte Web 组件

Passing variable to Custom Svelte Web Component

javascript

innerhtml

web-component

svelte