자식 컴포넌트의 버튼을 클릭하면 커스텀 이벤트인 @add-number가 호출되어 number가 1씩 더해진다.
<!DOCTYPE html>
<html>
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<p>{{ number }}</p>
<child-component @add-number="number += 1"></child-component>
</div>
<script>
const app = Vue.createApp({
data() {
return {
number: 1
}
}
})
app.component('child-component', {
template: `
<button @click="$emit('addNumber')">
더하기
</button>
`
})
app.mount('#root')
</script>
</body>
</html>
$emit 메소드의 두 번째 인자를 통해 특정 값을 보낼 수도 있다.
$emit 메소드의 두 번째 인자에 넣은 2가 $event 들어가고 이제는 버튼을 클릭할 때마다 2씩 숫자가 오른다.
<child-component @add-number="number += $event"></child-component>app.component('child-component', {
template: `
<button @click="$emit('addNumber', 2)">
더하기
</button>
`
})
@add-number에 메소드를 넣으면 메소드의 첫 번째 파라미터로 $event 값을 받을 수 있다.
<child-component @add-number="onAddNumber"></child-component>const app = Vue.createApp({
data() {
return {
number: 1
}
},
methods: {
onAddNumber(event) {
this.number += event
}
}
})'Vue' 카테고리의 다른 글
| 싱글 파일 컴포넌트(SFC)로 VueJS 시작하기 (0) | 2021.02.21 |
|---|---|
| VueJS에서 탭을 클릭 했을 때 컴포넌트를 변경하는 방법 (0) | 2021.02.20 |
| VueJS 시작하기 (0) | 2021.02.20 |
| NuxtJS로 Github에 블로그 만드는 방법 (0) | 2021.02.17 |
