mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.1 KiB
130 lines
3.1 KiB
---
|
|
title: Component directives
|
|
---
|
|
|
|
## on:_eventname_
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
on:eventname={handler}
|
|
```
|
|
|
|
Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events.
|
|
|
|
```svelte
|
|
<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>
|
|
```
|
|
|
|
Listening for component events looks the same as listening for DOM events:
|
|
|
|
```svelte
|
|
<SomeComponent on:whatever={handler} />
|
|
```
|
|
|
|
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.
|
|
|
|
```svelte
|
|
<SomeComponent on:whatever />
|
|
```
|
|
|
|
## --style-props
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
--style-props="anycssvalue"
|
|
```
|
|
|
|
You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
|
|
|
|
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
|
|
|
|
```svelte
|
|
<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />
|
|
```
|
|
|
|
Desugars to this:
|
|
|
|
```svelte
|
|
<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
|
|
<Slider bind:value min={0} max={100} />
|
|
</div>
|
|
```
|
|
|
|
**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.
|
|
|
|
For SVG namespace, the example above desugars into using `<g>` instead:
|
|
|
|
```svelte
|
|
<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
|
|
<Slider bind:value min={0} max={100} />
|
|
</g>
|
|
```
|
|
|
|
**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's CSS Variables support allows for easily themeable components:
|
|
|
|
```svelte
|
|
<style>
|
|
.potato-slider-rail {
|
|
background-color: var(--rail-color, var(--theme-color, 'purple'));
|
|
}
|
|
</style>
|
|
```
|
|
|
|
So you can set a high-level theme color:
|
|
|
|
```css
|
|
/* global.css */
|
|
html {
|
|
--theme-color: black;
|
|
}
|
|
```
|
|
|
|
Or override it at the consumer level:
|
|
|
|
```svelte
|
|
<Slider --rail-color="goldenrod" />
|
|
```
|
|
|
|
## bind:_property_
|
|
|
|
```svelte
|
|
bind:property={variable}
|
|
```
|
|
|
|
You can bind to component props using the same syntax as for elements.
|
|
|
|
```svelte
|
|
<Keypad bind:value={pin} />
|
|
```
|
|
|
|
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:this
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
bind:this={component_instance}
|
|
```
|
|
|
|
Components also support `bind:this`, allowing you to interact with component instances programmatically.
|
|
|
|
```svelte
|
|
<ShoppingCart bind:this={cart} />
|
|
|
|
<button on:click={() => cart.empty()}> Empty shopping cart </button>
|
|
```
|
|
|
|
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
|