Svelte 自定义元素更新不起作用答案

【问题标题】：Svelte custom element updating not workingSvelte 自定义元素更新不起作用
【发布时间】：2021-12-12 15:35:22
【问题描述】：

我使用 svelte 创建了一个自定义元素：

<svelte:options tag="my-component" />

<script>
  export let name;
</script>

<div>Hello {name}</div>

当我在 HTML 中初始化它时有效：

<my-component name="Jane"></my-component>

屏幕上的输出是“Hello Jane”。

当我尝试从控制台更新名称时，它不起作用：

var mc = document.querySelector('my-component');
mc.setAttribute('name', 'John');

输出仍然是“Hello Jane”。

为什么它不起作用？

【问题讨论】：

【解决方案1】：

您传递的变量是静态的而不是反应性的。 Svelte 将在页面加载时解析变量，仅此而已。

不要对在代码中将它们用作组件道具这一事实感到困惑。

我建议您在 sessionStorage 中设置这些变量并使用 Svelte 中的 onchange 事件来运行您的自定义逻辑

【讨论】：