时间戳

首页 > 解决方案 > 在通过 prop 传递的 svelte 中管理切换状态的推荐方法是什么？

svelte - 在通过 prop 传递的 svelte 中管理切换状态的推荐方法是什么？

问题描述

我在 Svelte 中创建了一个切换组件，我直接isActive在子组件中修改了 prop： https ://svelte.dev/repl/da651280c99c471d82944985339f8551?version=3.12.1

我正在考虑以下替代方案：

  1. 调度一个事件让父级修改状态
  2. 创建一个变量，该变量将从 parent 传递的 prop 初始化

我想避免#1，因为它感觉有点矫枉过正。使用 #2，根据 prop 初始化变量的最佳位置在哪里？

或者建议使用哪些其他替代方法来管理这种情况（对于传递搜索文本或标签列表等其他道具，我有同样的问题）？

标签： svelte

解决方案

在 Svelte 中，鼓励双向绑定，直接更新 props 通常是要走的路。如果在更新某些内容时应该发生复杂的操作，那么发出事件可能会更好。在这种情况下，您已经在更新道具，所以我只需像这样绑定值：

<script>
    import Toggle from './Toggle.svelte';

    let someToggleValue = false;
</script>

<Toggle title="Toggle Header" bind:isActive={someToggleValue}>
     <div class="content">
        The Content
     </div>
</Toggle>

推荐阅读