如何从Index.html向Svelte应用传递数据？

当然存在，针对你这种动态生成index.html、传递编译时未知数据的场景，下面是几种实用方案：

1. 直接访问全局变量 #

你已经在index.html的<script>里定义了全局的names变量，在Svelte组件中可以直接通过window.names获取：

<script>
  // 做兜底处理，避免变量未定义报错
  const names = window.names || [];
</script>

<ul>
  {#each names as name}
    <li>{name}</li>
  {/each}
</ul>

2. 通过自定义事件传递数据 #

在index.html中触发自定义事件，把数据作为事件参数传递，Svelte组件监听该事件接收数据：

• 修改index.html的脚本：

<script>
  var names = ["Tom", "Dick", "Harry"];
  // 页面加载完成后触发自定义事件
  window.addEventListener('DOMContentLoaded', () => {
    window.dispatchEvent(new CustomEvent('app-data', { detail: names }));
  });
</script>

• 在Svelte组件中监听事件：

<script>
  let names = [];

  // 监听自定义事件接收数据
  window.addEventListener('app-data', (event) => {
    names = event.detail;
  });
</script>

{#if names.length}
  <p>Received names: {names.join(', ')}</p>
{/if}

3. 通过HTML元素的data属性存储数据 #

把数据序列化后存在HTML元素（比如<body>）的data属性中，Svelte组件读取并解析：

• 修改index.html的<body>标签：

<body data-names='["Tom", "Dick", "Harry"]'>
</body>

• 在Svelte组件中读取：

<script>
  // 读取data属性并解析JSON，兜底空数组
  const names = JSON.parse(document.body.dataset.names || '[]');
</script>

<div>
  {#each names as name}
    <span>{name}</span>
  {/each}
</div>

这种方法适合结构化数据，注意要保证JSON格式的正确性（比如引号需转义）。

内容的提问来源于stack exchange，提问作者RayCh