VueJS의 자식 컴포넌트에서 부모에 이벤트를 주는 방법

Vue

VueJS의 자식 컴포넌트에서 부모에 이벤트를 주는 방법

Socratone 2021. 2. 20. 10:30

자식 컴포넌트의 버튼을 클릭하면 커스텀 이벤트인 @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
    }
  }
})

저작자표시 (새창열림)