Main
Hello
Algorithm
Note
Mark
Tools
AI
Hello
Algorithm
Note
Mark
Tools
AI

Stores

<!-- App.svelte -->
<script>
import { count, count2 } from "./store.js";

const increment = () => {
  count.update((v) => v + 1);
};
const reset = () => {
  count.set(0);
};
</script>

<p>
	{$count} * 2 = {$count2}
</p>

<button on:click="{increment}">
	increment
</button>
<button on:click="{reset}">
	reset
</button>
// store.js
import { writable } from "svelte/store";

export const count = writable(0);
export const count2 = derived(count, (value) => value * 2);

Custom

<!-- App.svelte -->
<script>
import { count } from "./store.js";
</script>

<p>
	{$count}
</p>

<button on:click="{count.increment}">
	increment
</button>
<button on:click="{count.decrement}">
	increment
</button>
<button on:click="{count.reset}">
	reset
</button>
import { writable } from "svelte/store";

function createCount() {
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    increment: () => {},
    decrement: () => {},
    reset: () => {},
  };
}

export const count = createCount();

Slot

<!-- App.svelte -->
<script>
import Box from "./Box.svelte";
import Box2 from "./Box2.svelte";
</script>

<!-- basic -->
<Box>slot</Box>
<!-- default -->
<Box />
<!-- name -->
<Box2>
	<span slot="heading">title</span>
</Box2>
<Box2>
	<span slot="content">div balabala</span>
</Box2>

<!-- Box.svelte -->
<div>
	<slot>
		<p>default value</p>
	</slot>
</div>

<!-- Box2.svelte -->
<div>
	<h1>
		<slot name="heading" />
	</h1>
	<p>
		<slot name="content" />
	</p>
</div>