使用保留字作为道具名称

Question

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

Unexpected keyword '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>

使用保留字作为道具名称

Use reserved word as prop name

svelte