component bind

parent.svelte

<script>
	import Child from './Child.svelte';
	import ChildBind from './ChildBind.svelte';
	let number = 0;

	let person = {
		name: 'song',
		age: 20,
	};

	let pValue = 1;
	let cValue = 1;
</script>

<style>
</style>

<div>
	<button on:click="{() => (number += 1)}">+</button>
	<button on:click="{() => (number -= 1)}">-</button>

	<Child number="{number}" person="{person.name} {person.age}" />
	<Child {...person} />

	<ChildBind bind:cValue="{pValue}" />
	<ChildBind bind:cValue="{cValue}" />
</div>

child.svlte

<script>
	export let number = 10;
	export let person = {
		name: '',
		age: 0,
	};
	export let name = '';
	export let age = 0;
</script>

<style>
</style>

<h1>{number}</h1>

<p>{person}</p>

<p>{name}</p>
<p>{age}</p>

childBind.svelte

<script>
	export let cValue = 10;

	const childClick = () => {
		cValue *= 2;
	};
</script>

<style>
</style>

<button on:click="{childClick}">자식 버튼</button>
<p>{cValue}</p>