Skip to main content

<svelte:options>

<svelte:options option={value} />

<svelte:options> 元素提供了一个指定每个组件编译器选项的地方,这些选项在 编译器部分 中有详细说明。可能的选项有:

¥The <svelte:options> element provides a place to specify per-component compiler options, which are detailed in the compiler section. The possible options are:

  • runes={true} — 强制组件进入符文模式(参见 旧版 API 部分)

    ¥runes={true} — forces a component into runes mode (see the Legacy APIs section)

  • runes={false} — 强制组件进入旧模式

    ¥runes={false} — forces a component into legacy mode

  • namespace="..." — 此组件将在其中使用的命名空间,可以是 “html”(默认值)、”svg” 或 “mathml”

    ¥namespace="..." — the namespace where this component will be used, can be “html” (the default), “svg” or “mathml”

  • customElement={...} — 将此组件编译为自定义元素时使用的 options。如果传递了字符串,则将其用作 tag 选项

    ¥customElement={...} — the options to use when compiling this component as a custom element. If a string is passed, it is used as the tag option

  • css="injected" — 组件将以内联方式注入其样式:在服务器端渲染过程中,它作为 head 中的 <style> 标签注入,在客户端渲染过程中,它通过 JavaScript 加载

    ¥css="injected" — the component will inject its styles inline: During server side rendering, it’s injected as a <style> tag in the head, during client side rendering, it’s loaded via JavaScript

Legacy mode

弃用的选项 Svelte 4 还包括以下选项。它们在 Svelte 5 中已被弃用,并且在符文模式下不起作用。

¥[!LEGACY] Deprecated options Svelte 4 also included the following options. They are deprecated in Svelte 5 and non-functional in runes mode.

  • immutable={true} — 你从不使用可变数据,因此编译器可以执行简单的引用相等性检查以确定值是否已更改

    ¥immutable={true} — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed

  • immutable={false} — 默认。Svelte 对于可变对象是否发生变化会更加保守

    ¥immutable={false} — the default. Svelte will be more conservative about whether or not mutable objects have changed

  • accessors={true} — 为组件的 props 添加 getter 和 setter

    ¥accessors={true} — adds getters and setters for the component’s props

  • accessors={false} — 默认

    ¥accessors={false} — the default

<svelte:options customElement="my-custom-element" />
上一页 下一页