Question

有没有办法在Svelte中重新创建一个组件？

上下文是我有一个已经创建的组件。一旦完成它的过程，我希望它被销毁然后再次创建。这会将其属性恢复为默认状态，并确保对其嵌套组件执行相同的操作。

我认为现有的组件方法在技术上是可行的，但我想知道是否有一种直接的方法可以解决它。

另外，我知道在某些情况下重新创建组件可能效率低下。通过手动重置组件及其嵌套组件的状态来实现期望的娱乐效果可能是优选的。例如，递归函数可以某种方式遍历组件及其嵌套组件，并调用每个组件的默认数据函数。但是，这并不是那么简单，并且存在问题方面（即计算属性和创建生命周期钩子）。

Answer 1

简短的回答是否定的，要重新创建处于工厂新鲜状态的组件，您需要再次调用new Thing(...)。

Answer 2

是，使用{#key}块：

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

let unique = {}

function restart() {
  unique = {} // every {} is unique, {} === {} evaluates to false
}
</script>

{#key unique}
  <YourComponent />
{/key}

<button on:click={restart}>Restart</button>

REPL

{#key}在Svelte v3.28中引入，在此之前，您需要使用键控{#each}块with only one item

重新创建一个组件？

2 个答案: