组件指令

on:eventname

on:eventname={handler}

组件可以使用 createEventDispatcher 或通过转发 DOM 事件来发出事件。

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
</script>
<!-- 程序化派发 -->
<button on:click={() => dispatch('hello')}>一</button>
<!-- 声明式事件转发 -->
<button on:click>二</button>

监听组件事件看起来与监听 DOM 事件相同：

<SomeComponent on:whatever={handler} />

与 DOM 事件一样，如果 on: 指令没有值，事件将被转发，这意味着使用者可以监听它。

<SomeComponent on:whatever />

—style-props

--style-props="anycssvalue"

您也可以将样式作为属性传递给组件，用于主题化，使用 CSS 自定义属性。

Svelte 的实现本质上是添加包装元素的语法糖。这个例子：

<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />

解糖为这个：

<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
    <Slider bind:value min={0} max={100} />
</div>

注意：由于这是一个额外的 <div>，请小心您的 CSS 结构可能会意外地定位到这个元素。使用此功能时，请注意这个额外的包装元素。

对于 SVG 命名空间，上述示例解糖为使用 <g>：

<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
    <Slider bind:value min={0} max={100} />
</g>

注意：由于这是一个额外的 <g>，请小心您的 CSS 结构可能会意外地定位到这个元素。使用此功能时，请注意这个额外的包装元素。

Svelte 的 CSS 变量支持允许轻松创建可主题化的组件：

<style>
    .potato-slider-rail {
        background-color: var(--rail-color, var(--theme-color, 'purple'));
    }
</style>

因此，您可以设置一个高级主题颜色：

/* global.css */
html {
    --theme-color: black;
}

或在使用者级别覆盖它：

<Slider --rail-color="goldenrod" />

bind:property

bind:property={variable}

您可以使用与元素相同的语法绑定到组件属性。

<Keypad bind:value={pin} />

虽然 Svelte 属性在没有绑定的情况下是响应式的，但这种反应性默认只会向下流入组件。使用 bind:property 允许从组件内部的属性更改向上流动出组件。

bind:this

bind:this={component_instance}

组件也支持 bind:this，允许您以编程方式与组件实例交互。

<ShoppingCart bind:this={cart} />
<button on:click={() => cart.empty()}> 清空购物车 </button>

注意，我们不能做 {cart.empty}，因为在按钮首次渲染时 cart 是 undefined 并会抛出错误。