Svelte自定义元素更新不工作

Question

我已经使用slite:

创建了一个自定义元素

<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"

为什么不工作?

Answer 1

传递的变量是静态的，而不是动态的。Svelte会在页面加载时解析变量，就这样。

不要因为在代码中将它们用作组件道具而感到困惑。

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