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>