vue에서 $on의 사용법은 무엇입니까-View.js-php.cn

vue에서 $on의 사용법은 무엇입니까

WBOY

풀어 주다： 2022-03-17 11:20:56

원래의

17100명이 탐색했습니다.

vue에서 "$on"은 현재 인스턴스에서 사용자 정의 이벤트를 수신하는 데 사용됩니다. 이벤트는 "vm.$emit"에 의해 트리거될 수 있습니다. 콜백 함수는 이벤트 트리거 함수에 전달된 모든 추가 매개변수를 수신합니다. 구문은 "vm .$on(event, callback)"입니다.

vue에서 $on의 사용법은 무엇입니까

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue에서 $on의 사용법은 무엇입니까?

vue에서 $on(eventName)을 사용하여 이벤트를 수신합니다.

$on(eventName)을 사용하여 현재 인스턴스에서 사용자 정의 이벤트를 수신합니다. 이벤트는 vm.$emit에 의해 트리거될 수 있습니다. 콜백 함수는 이벤트 트리거 함수에 전달된 추가 매개변수를 수신합니다.

vm.$on( event, callback )

로그인 후 복사

매개변수:

{string | Array} 이벤트(배열은 2.2.0 이상에서만 지원됨) {Function} callback

Instance 1 이 페이지의 단일 이벤트

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      isClick() {
        this.$emit(&#39;isLeft&#39;, &#39;点击事件！&#39;);
      }
    },
    mounted() {
      this.$on(&#39;isLeft&#39;, (val) => {
        console.log(val);
      });
    }
  }
</script>

로그인 후 복사

위 코드는 버튼을 누르면 this.$emit이 이벤트를 전달하고, this.$on은 이 페이지의 이벤트를 캡처합니다

예제 2 이 페이지의 여러 이벤트

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
    <el-button type="primary" @click="isClickOther">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      isClick() {
        this.$emit(&#39;isLeft&#39;, &#39;点击事件！&#39;);
      },
      isClickOther() {
        this.$emit(&#39;isRight&#39;, [&#39;点击1&#39;, &#39;点击2&#39;]);
      }
    },
    mounted() {
      this.$on(&#39;isLeft&#39;, (val) => {
        console.log(val);
      });
      this.$on(&#39;isRight&#39;, (...val) => {
        console.log(val);
      });
      this.$on([&#39;isLeft&#39;, &#39;isRight&#39;], () => {
        console.log(666);
      });
    }
  }
</script>

로그인 후 복사

위의 예는 이 페이지에서 두 개의 클릭 이벤트를 들을 수 있습니다. 동시에 두 개의 이벤트에 적용하거나 여러 매개변수를 동시에 전달할 수 있습니다

[관련 추천: "vue.js tutorial"]

위 내용은 vue에서 $on의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!