组件指令

on:事件名称(on:eventname)permalink

on:eventname={handler}

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

英Components can emit events using createEventDispatcher or by forwarding DOM events.

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<!-- programmatic dispatching -->
<button on:click={() => dispatch('hello')}> one </button>

<!-- declarative event forwarding -->
<button on:click> two </button>

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

英Listening for component events looks the same as listening for DOM events:

<SomeComponent on:whatever={handler} />

与 DOM 事件一样，如果使用不带值的 on: 指令，则事件将被转发，这意味着使用者可以监听该事件。

英As with DOM events, if the on: directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.

<SomeComponent on:whatever />

--style-propspermalink

--style-props="anycssvalue"

你还可以使用 CSS 自定义属性将样式作为 props 传递给组件以实现主题化。

英You can also pass styles as props to components for the purposes of theming, using CSS custom properties.

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

英Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:

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

对此进行脱糖：

英Desugars to this:

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

Note： 由于这是一个额外的 <div>，请注意你的 CSS 结构可能会意外地针对此目标。 使用此功能时请注意添加的封装元素。

英Note: Since this is an extra <div>, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.

对于 SVG 命名空间，上面的示例将糖去除为使用 <g>：

英For SVG namespace, the example above desugars into using <g> instead:

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

Note： 由于这是一个额外的 <g>，请注意你的 CSS 结构可能会意外地针对此目标。 使用此功能时请注意添加的封装元素。

英Note: Since this is an extra <g>, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.

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

英Svelte's CSS Variables support allows for easily themeable components:

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

所以你可以设置高级主题颜色：

英So you can set a high-level theme color:

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

或者在消费者级别覆盖它：

英Or override it at the consumer level:

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

bind:属性(bind:property)permalink

bind:property={variable}

你可以使用与元素相同的语法绑定到组件 props。

英You can bind to component props using the same syntax as for elements.

<Keypad bind:value={pin} />

虽然 Svelte props 在没有绑定的情况下是反应性的，但默认情况下该反应性仅向下流入组件。 使用 bind:property 允许对组件内部的属性所做的更改流回组件之外。

英While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using bind:property allows changes to the property from within the component to flow back up out of the component.

bind:thispermalink

bind:this={component_instance}

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

英Components also support bind:this, allowing you to interact with component instances programmatically.

<ShoppingCart bind:this={cart} />

<button on:click={() => cart.empty()}> Empty shopping cart </button>

请注意，我们不能执行 {cart.empty}，因为当按钮首次渲染并引发错误时，cart 是 undefined。