this.$emit() 사용법

this.$emit는 Vue.js의 메서드로 자식 구성 요소에서 부모 구성 요소로 이벤트를 전달하는 데 사용할 수 있습니다.

사용 방법은 다음과 같습니다.

this.$emit(eventName, […args])

그 중 eventName 은 이벤트 이름이고, args는 상위 구성 요소로 전달되는 데이터를 나타내는 선택적 매개 변수입니다.

예를 들어 자식 컴포넌트가 'add-item' 이라는 이벤트를 부모 컴포넌트에 전달 하고 데이터 항목을 전달해야 하는 경우 다음과 같이 사용할 수 있습니다.

this.$emit('add-item', item)

상위 구성 요소가 이벤트를 수신하면 v-on 명령을 사용하여 이벤트를 수신하고 이벤트가 트리거될 때 해당 코드를 실행할 수 있습니다. 예를 들어:

<template>
  <div>
    <ChildComponent v-on:add-item="handleAddItem"></ChildComponent>
  </div>
</template>

<script>
export default {
  methods: {
    handleAddItem(item) {
      // 处理 add-item 事件
    }
  }
}
</script>

일반적으로 this.$emit은 Vue.js에서 매우 유용한 메서드로, 자식 구성 요소가 이벤트를 부모 구성 요소에 전달하는 데 도움이 될 수 있습니다.