>웹 프론트엔드 >JS 튜토리얼 >vue에서 $emit를 사용할 때 어떻게 상위 구성 요소가 하위 구성 요소의 이벤트를 수신하지 않을 수 있습니까?

vue에서 $emit를 사용할 때 어떻게 상위 구성 요소가 하위 구성 요소의 이벤트를 수신하지 않을 수 있습니까?

亚连
亚连원래의
2018-06-04 14:17:574104검색

아래에서는 Vue가 $emit을 사용할 때 상위 구성 요소가 하위 구성 요소의 이벤트 인스턴스를 모니터링할 수 없는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.

vue가 $emit를 사용할 때 부모 컴포넌트가 자식 컴포넌트의 이벤트를 모니터링할 수 없는 이유는 $emit에 의해 전달된 이벤트 이름은 소문자만 가능하고 대문자 카멜 케이스 규칙을 사용하여 이름을 지정할 수 없기 때문입니다

<p id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
 </p>
 <script>
  Vue.component(&#39;button-counter&#39;, {
   template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
     this.counter += 1
     this.$emit(&#39;ee&#39;, this.counter);//有效
     this.$emit(&#39;eEvent&#39;, this.counter);//无效,不能使用大写的驼峰规则命名
    }
   },
  })
  new Vue({
   el: &#39;#counter-event-example&#39;,
   data: {
    total: &#39;点击下面的按钮&#39;
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>

위 내용은 제가 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

jQuery+JSONP의 교차 도메인 요청 방법(상세 튜토리얼)

Vue에서 메소드와 계산의 차이점을 자세히 설명(자세한 튜토리얼)

Vue2를 사용하여. 0

에서 http 요청 및 로딩 디스플레이 구현

위 내용은 vue에서 $emit를 사용할 때 어떻게 상위 구성 요소가 하위 구성 요소의 이벤트를 수신하지 않을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.