Coding With Rich Harris 6

0 min read


Alright guys.. welcome back to our channel..

Pass Down Callback()

App.svelte

<script>
	import Button from "./Button.svelte"
	export let name;

	let count = 0;
    
	const increment = () => {
		count += 1;
	};
</script>

<main>
	<h1>Hi {name}! {count}</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Button {count} {increment} />
	<!-- <Button count={0} /> -->
</main>

Button.svelte

<script>
    export let count;

   export let increment;
</script>

<style>

</style>

<button on:click={increment}>
    count: {count}
</button>

terlihat dari code diatas kita dapat memanipulasi value dari count dengan function increment namun tetap berada dilokal component masing-masing…sehingga saat kita import Button component dan kita mentrigger functionnya untuk menambah value count +1 jadi apapun yang menggunakan count itu akan ikut berubah juga… ini sangat mirip dengan state management..

result

oke guyss link github ada disini …. cyaaa….

Bima Sena

Leave a Reply

Your email address will not be published. Required fields are marked *