# 컴포넌트 통신방법 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="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://freeseamew.gitbook.io/svelte/3./2-dispatch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.