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.
30 lines
1.0 KiB
30 lines
1.0 KiB
6 years ago
|
---
|
||
|
title: Sharing code
|
||
|
---
|
||
|
|
||
|
In all the examples we've seen so far, the `<script>` block contains code that runs when each component instance is initialised. For the vast majority of components, that's all you'll ever need.
|
||
|
|
||
|
Very occasionally, you'll need to run some code outside of an individual component instance. For example, you can play all five of these audio players simultaneously; it would be better if playing one stopped all the others.
|
||
|
|
||
|
We can do that by declaring a `<script context="module">` block. Code contained inside it will run once, when the module first evaluates, rather than when a component is instantiated. Place this at the top of `AudioPlayer.svelte`:
|
||
|
|
||
|
```html
|
||
|
<script context="module">
|
||
|
const elements = new Set();
|
||
|
</script>
|
||
|
```
|
||
|
|
||
|
It's now possible for the components to 'talk' to each other without any state management:
|
||
|
|
||
|
```js
|
||
|
onMount(() => {
|
||
|
elements.add(audio);
|
||
|
return () => elements.delete(audio);
|
||
|
});
|
||
|
|
||
|
function stopOthers() {
|
||
|
elements.forEach(element => {
|
||
|
if (element !== audio) element.pause();
|
||
|
});
|
||
|
}
|
||
|
```
|