svelte - 使用保留字作为道具名称

Question

我想将其class用作组件的道具名称，但出现以下错误：

意外的关键字“类”。

<script>
  export let class = '';
</script>

<style>
  .foo {
    color: red;
  }
</style>

<div class="{class}">
  <slot />
</div>

是否可以在 Svelte 中使用保留字作为道具名称？

Answer 1

通过将 prop 命名为不是保留字的内容，然后将其导出为保留字，它可以按预期工作。

REPL

<!-- App.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child class="foo">Bar</Child>

<!-- Child.svelte -->
<script>
  let classProp = '';

  export { classProp as class };
</script>

<style>
  .foo {
    color: red;
  }
</style>

<div class="{classProp}">
  <slot />
</div>