> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/3./2-dispatch.md).

# 컴포넌트 통신방법 2 : dispatch

### 2. 상향식 전달: 하위 컴포넌트 → 상위 컴포넌트

: dispatch를 이용해 하위 컴포넌트에서 상위 컴포넌트의 함수를 호출해 사용 할 수 있습다.

```
// child.svelte

<script>
import { createEventDispatcher } from 'svelte'

const dispatch = createEventDispatcher()

function addAction(param) {

  console.log(param)

	dispatch('add', {
    value : param,
		message: param + ' 값 추가'
	})
}

</script>

<button on:click={() => addAction(10)} >Add 10</button>
<button on:click={() => addAction(20)} >Add 20</button>

// first.svelte
<script>
  import SubChild from './subChild.svelte'

</script>

<SubChild on:add />

// App.svelte

<script>
import First from './first.svelte'

let value = 0

function handleValueAdd(event) {
	value = value + event.detail.value
}
</script>

<p>value : {value}</p> 

<Child on:add={handleValueAdd}  />
```

하위 컴포넌트에서 발생된 값은 `event.detail` 안에 들어가 있는 것을 알 수 있습니다.

#### 예제 - dispatch

* App.svelte

```
<script>

import PanelComponent from './components/panelComponent.svelte'

let count = 10

function incrementCount(event) {
	// count = count + 1
	console.log(event.detail.message)
	count ++

}

</script>

<PanelComponent {count} on:increment={incrementCount}/>
```

* panelComponent.svelte

```
<script>
import ButtonComponent from './buttonComponent.svelte'

export let count

</script>

<div class="penal">
  <h1>{count}</h1>
  

  <ButtonComponent {count} on:increment />
  
</div>

<style>
  .penal {
    padding: 20px;
    display:flex;
    flex-direction: column;
    justify-items: center;
    justify-content: space-around;
    align-items: center;
    height: 500px;
    width:400px;
    background: #e2e2e2;
    border: 1px solid #777777;
  }
</style>
```

* buttonComponent.svelte

```
<script>
import {createEventDispatcher} from 'svelte'

const dispatch = createEventDispatcher()

function handleIncrement(param) {
  dispatch('increment', {
   message: '값 증가 :' + param
  })
}

export let count

</script>

<button on:click={() => handleIncrement(10)} >
  increment count [{count}]
</button>
```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="/files/-MGqwZuQK1aEaE5Bp21i" alt="만들면서 배우는 svelte"></div>