Vue 구성요소 통신: 사용자 정의 이벤트 통신을 위해 $emit 및 $on 사용

Vue 컴포넌트 통신: 맞춤형 이벤트 통신을 위해 $emit 및 $on을 사용하세요.

Vue 애플리케이션에서 컴포넌트 통신은 매우 중요한 부분입니다. 구성 요소 통신을 통해 서로 다른 구성 요소 간에 데이터를 전달하고 이벤트를 트리거할 수 있습니다. Vue 프레임워크는 구성요소 간 통신을 위한 다양한 방법을 제공합니다. 일반적인 방법 중 하나는 사용자 정의 이벤트 통신에 $emit 및 $on을 사용하는 것입니다.

Vue에서 각 구성 요소는 $emit 메서드를 통해 사용자 정의 이벤트를 트리거하고 데이터를 다른 구성 요소에 전달할 수 있습니다. 다른 구성요소는 $on을 통해 이 사용자 정의 이벤트를 수신하고 이벤트가 트리거될 때 해당 로직을 실행할 수 있습니다.

두 개의 구성 요소가 있다고 가정하고 간단한 예를 살펴보겠습니다. 하나는 상위 구성 요소이고 다른 하나는 하위 구성 요소입니다. 하위 구성요소의 버튼을 클릭하면 해당 처리를 수행하라는 알림이 상위 구성요소에 전달되기를 바랍니다.

먼저 하위 구성 요소에 버튼을 정의하고 버튼을 클릭할 때 맞춤 이벤트를 트리거해야 합니다.

<template>
  <button @click="sendData">点击我触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', { data: 'hello' });
    }
  }
};
</script>

위 코드에서 하위 구성 요소는 버튼을 정의하고 이를 버튼의 클릭 이벤트에 전달합니다. 'customEvent'라는 맞춤 이벤트를 트리거하고 데이터 { data: 'hello' }가 포함된 개체를 전달합니다.

그런 다음 상위 구성 요소에서 이 맞춤 이벤트를 수신하고 이벤트가 트리거될 때 해당 로직을 실행해야 합니다. 이 사용자 정의 이벤트를 수신하기 위해 생성된 상위 구성 요소의 수명 주기 후크 함수에서 this.$on을 사용할 수 있습니다.

<template>
  <div>
    <p>{{ message }}</p>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
};
</script>

위 코드에서 상위 구성 요소는 먼저 하위 구성 요소 ChildComponent를 소개하고 <템플릿 구성 요소에서 child->를 사용합니다. ; 하위 구성 요소를 참조하는 태그입니다. 그런 다음 생성된 Life Cycle Hook 함수에서 this.$on을 통해 하위 컴포넌트에 의해 트리거되는 'customEvent' 이벤트를 수신하고, 해당 이벤트가 트리거될 때 실행할 콜백 함수를 handlerCustomEvent로 지정합니다. HandleCustomEvent에서는 하위 구성 요소에서 전달된 데이터를 가져와 그에 따라 처리할 수 있습니다.

이제 하위 컴포넌트와 상위 컴포넌트 간의 통신이 완료되었습니다. 하위 컴포넌트의 버튼을 클릭하면 'customEvent' 커스텀 이벤트가 발생하고 this.$emit를 통해 상위 컴포넌트로 데이터가 전달됩니다. 상위 구성 요소가 데이터를 받은 후 메시지 변수에 저장되고 템플릿에 표시됩니다.

this.$on을 사용하여 맞춤 이벤트를 듣는 것 외에도 this.$once를 사용하여 맞춤 이벤트를 들을 수 있으므로 이벤트가 한 번 트리거되면 모니터링이 자동으로 제거됩니다. 또한 Vue는 리스너를 수동으로 제거하기 위해 this.$off 메소드도 제공합니다.

요약:
$emit 및 $on을 통한 사용자 정의 이벤트 통신은 Vue의 일반적인 구성 요소 통신 방법입니다. 사용자 정의 이벤트를 트리거하고 전송 컴포넌트에서 this.$emit을 통해 데이터를 전달한 다음 수신 컴포넌트에서 this.$on을 통해 사용자 정의 이벤트를 수신하고 이벤트가 트리거될 때 해당 로직을 실행할 수 있습니다. 이 접근 방식은 구성 요소 간의 유연한 통신을 달성하고 코드 재사용성과 유지 관리성을 향상시키는 데 도움이 될 수 있습니다.

위는 사용자 정의 이벤트 통신을 위해 $emit 및 $on을 사용하는 샘플 코드 및 지침입니다. Vue 컴포넌트 통신을 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 구성요소 통신: 사용자 정의 이벤트 통신을 위해 $emit 및 $on 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!