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

Vue 구성 요소 통신: 사용자 정의 이벤트 청취를 위해 $on을 사용합니다.

Vue에서 구성 요소는 독립적이며 각 구성 요소에는 고유한 수명 주기와 데이터가 있습니다. 하지만 실제 개발 과정에서는 컴포넌트 간 통신이 불가피하다. Vue는 매우 유연하고 효율적인 구성 요소 통신 방법인 사용자 정의 이벤트 수신을 제공합니다.

Vue의 사용자 정의 이벤트 청취 메커니즘은 게시-구독 모델을 기반으로 구현됩니다. Vue 인스턴스의 $on 메소드를 사용하여 한 구성요소에서 사용자 정의 이벤트를 수신하고 $emit 메소드를 통해 다른 구성요소에서 이벤트를 트리거할 수 있습니다. 아래에서는 커스텀 이벤트 모니터링을 위해 $on을 활용하는 방법을 자세히 소개하겠습니다.

먼저 간단한 상위-하위 구성 요소 예제를 만들어 보겠습니다. 상위 구성 요소는 App.vue이고 하위 구성 요소는 Child.vue입니다.

App.vue:

<template>
  <div>
    <h2>App Component</h2>
    <button @click="notifyChild">通知子组件</button>
    <Child></Child>
  </div>
</template>

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

  export default {
    name: 'App',
    components: {
      Child
    },
    methods: {
      notifyChild() {
        this.$emit('customEvent', 'Hello Child Component!');
      }
    }
  }
</script>

Child.vue:

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$parent.$on('customEvent', this.handleCustomEvent);
    },
    beforeDestroy() {
      this.$parent.$off('customEvent', this.handleCustomEvent);
    },
    methods: {
      handleCustomEvent(message) {
        this.message = message;
      }
    }
  }
</script>

상위 구성 요소 App.vue에서 버튼을 클릭하여 사용자 정의 이벤트 customEvent를 트리거하고 메시지를 하위 구성 요소에 전달합니다. customEvent，并传递一个消息给子组件。

子组件Child.vue中，我们在mounted生命周期钩子函数中使用this.$parent.$on方法监听父组件中的自定义事件customEvent。并在beforeDestroy生命周期钩子函数中使用this.$parent.$off方法取消监听。在方法handleCustomEvent中，我们将父组件传递的消息赋值给子组件的message。

通过以上代码示例，我们实现了父子组件之间的通信。当点击父组件中的按钮时，子组件会接收到父组件传递的消息并将其显示出来。

除了父子组件之间的通信，我们还可以在任意两个组件之间建立通信。只需在其中一个组件中使用this.$on监听自定义事件，然后在另一个组件中使用this.$emit

하위 컴포넌트 Child.vue에서는 마운트된 라이프 사이클 후크 함수의 this.$parent.$on 메소드를 사용하여 사용자 정의 이벤트 customEvent를 수신합니다. 상위 구성 요소. 그리고 beforeDestroy 수명 주기 후크 함수의 this.$parent.$off 메서드를 사용하여 청취를 취소합니다. handleCustomEvent 메소드에서는 상위 구성요소가 전달한 메시지를 하위 구성요소의 메시지에 할당합니다.

위의 코드 예시를 통해 상위 컴포넌트와 하위 컴포넌트 간의 통신을 구현했습니다. 상위 컴포넌트의 버튼을 클릭하면 하위 컴포넌트는 상위 컴포넌트가 전달한 메시지를 수신하여 표시합니다. 🎜🎜상위 구성 요소와 하위 구성 요소 간의 통신 외에도 두 구성 요소 간의 통신을 설정할 수도 있습니다. 한 구성요소에서 this.$on을 사용하여 맞춤 이벤트를 수신한 다음 this.$emit를 사용하여 다른 구성요소에서 이벤트를 트리거하면 됩니다. 🎜🎜요약하자면, 사용자 정의 이벤트 모니터링을 위한 Vue의 $on 방식을 통해 유연하고 효율적인 컴포넌트 통신을 달성할 수 있습니다. 상위 구성 요소와 하위 구성 요소 간의 통신이든 두 구성 요소 간의 통신이든 쉽게 처리할 수 있습니다. 이 글이 Vue 개발 시 컴포넌트 통신 문제에 도움이 되기를 바랍니다. 🎜

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