组件指令

在 GitHub 上编辑此页面

on:事件名称永久链接

on:eventname={handler}

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

<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 事件类似

<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()}> Empty shopping cart </button>

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