vue의 $on 메소드의 자세한 예

Vue.js는 개발자에게 복잡한 사용자 인터페이스와 단일 페이지 애플리케이션을 쉽게 구축할 수 있는 풍부한 API와 도구를 제공하는 진보적인 프런트 엔드 프레임워크입니다. 매우 유용한 방법 중 하나는 $on 방법이며, 이 기사에서 이에 대해 자세히 설명하고 시연할 것입니다.

$on 메소드는 Vue 객체의 인스턴스 메소드로 주로 Vue 인스턴스에서 커스텀 이벤트를 수신하는 데 사용됩니다. 커스텀 이벤트가 트리거되면 이벤트에 응답하기 위해 콜백 함수가 실행될 수 있습니다. $on 메소드의 구문은 다음과 같습니다.

vm.$on(event, callback)

여기서 vm은 Vue 인스턴스를 나타내고, event는 모니터링되는 사용자 정의 이벤트 이름을 나타내며, callback은 이벤트가 트리거될 때 실행될 콜백 함수를 나타냅니다.

예를 들어 Vue 인스턴스를 생성한 다음 아래와 같이 인스턴스에서 "test"라는 사용자 정의 이벤트를 수신합니다.

var vm = new Vue();
vm.$on("test", function () {
  console.log("test事件被触发了！");
});

이 예에서는 Vue 인스턴스에서 $on 메소드를 사용하여 " 테스트" 사용자 정의 이벤트를 실행하고 익명 함수를 콜백 함수로 전달합니다. 이 함수는 "테스트" 이벤트가 트리거될 때 실행됩니다.

이제 맞춤 이벤트를 실행하는 방법을 살펴보겠습니다. $emit 메소드를 사용하여 아래와 같이 사용자 정의 이벤트를 트리거할 수 있습니다.

vm.$emit("test");

이 예에서는 $emit 메소드를 사용하여 "test"라는 사용자 정의 이벤트를 트리거합니다. $emit 메소드를 호출하면 $on 메소드에 정의된 콜백 함수가 실행되고 "test event was Triggered!"라는 메시지가 출력됩니다.

$emit 메소드 외에도 $dispatch 및 $broadcast 메소드와 같이 사용자 정의 이벤트를 트리거하는 데 사용할 수 있는 몇 가지 다른 메소드가 있습니다. 여기에는 어떠한 설명도 제공되지 않습니다.

$on 메소드에 등록된 콜백 함수는 즉시 실행되지 않는다는 점에 유의하세요. 이 이벤트가 발생하면 Vue 인스턴스는 등록된 모든 콜백 함수를 순서대로 호출합니다. $on 메소드 바로 다음에 $emit 메소드를 호출하면 이벤트를 청취하지 않아 콜백 함수가 실행되지 않을 수 있습니다.

$on 메서드를 사용할 때 아래와 같이 선택적 매개 변수를 전달하여 콜백 함수의 실행 컨텍스트를 지정할 수도 있습니다.

vm.$on("test", function () {
  console.log(this.message);
}, { message: "Hello World!" });

이 예에서는 개체를 사용하여 실행 컨텍스트 매개 변수를 전달합니다. 분명히 콜백 함수에서 this.message는 "Hello World!" 문자열을 가리킬 것입니다. 이 기능은 콜백 함수를 더욱 유연하고 적응 가능하게 만듭니다.

마지막으로 주의할 점은 $on 메소드는 현재 Vue 인스턴스의 사용자 정의 이벤트만 모니터링하고 다른 인스턴스에는 영향을 미치지 않는다는 것입니다. 여러 인스턴스 간에 사용자 정의 이벤트를 공유하려면 Vue 인스턴스의 이벤트 버스 메커니즘을 사용하는 것이 좋습니다.

간단히 말하면 $on 메소드는 Vue.js 프레임워크에서 매우 중요하고 실용적인 메소드입니다. 이 방법을 사용하면 다양한 커스텀 이벤트에 대한 모니터링 및 대응을 쉽게 구현할 수 있습니다.

위 내용은 vue의 $on 메소드의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!