时间戳

首页 > 解决方案 > Svelte 不更新子组件

svelte - Svelte 不更新子组件

问题描述

我有一个带有子组件的应用程序。当父级中的变量发生更改时，子级组件不会更新。该代码在 Svelte "REPL" 中运行良好。我想知道是否有人有任何想法来帮助调试它。

使用 Svelte 版本 3.29.0

项目结构：App.svelte

<script>
    import Nested from "./Nested.svelte"

    const mouse_move = v => () => {
        selected_index = v
        console.log(selected_index)
    }

    let selected_index = 1;
</script>
{selected_index}
<Nested name={selected_index} mouseenter={mouse_move("here")} mouseleave={mouse_move("gone")}/>

嵌套的.svelte

<script>
    export let name = "Ready";
    export let mouseenter = () => {};
    export let mouseleave = () => {};
</script>

<h1 on:mouseenter={mouseenter} on:mouseleave={mouseleave}>Hello {name}!</h1>

将鼠标悬停在h1文本上会导致selected_index从1变为here。在我的本地主机版本中，该元素由渲染，{selected_index}但Nested元素保持不变，但在 Svelte“REPL”中变化良好。

任何关于什么/如何调试的想法将不胜感激。

** 编辑 **

当我为生产而构建它并在本地服务时，它运行良好。尝试了以下方法，但都没有奏效：

标签： svelte

解决方案

绑定名字

<Nested bind:name={selected_index} mouseenter={mouse_move("here")} mouseleave={mouse_move("gone")}/>

推荐阅读