VueJs 템플릿이 아닌 메서드에서 이벤트를 듣는 방법

VueJs 템플릿이 아닌 메서드에서 이벤트를 듣는 방법

하위 구성 요소에서 상위 구성 요소로 이벤트를 보냅니다.부모의 방식을 통해 신호를 가로채고 싶다.단, 리스닝 기능은 이벤트가 발생했는지 여부에 관계없이 항상 실행됩니다.단일 파일 컴포넌트와 Vue-router를 사용하고 있습니다.

한편, VueJ의 예에서는 단일 파일 컴포넌트를 사용하는 경우는 거의 없습니다.또한 1개의 파일에 있는 단순한 Vue 앱에서 여러 개의 단일 파일 컴포넌트로 변환하는 것은 혼란스러울 수 있습니다.

학부모:

<template>
 ....html here
</template>
<script>
  import Child from './Child.vue'

  export default {
  name: 'Parent',
  data () {
    return {
     stage: 1
    }
  },
  components: {
    Child
  },
  created: function () {
    // the following line always runs even when listen for non-existent event eg this.$on('nonsense'...)
    this.$on('child-event', this.stage = 2)
  }
  }

아이:

<template>
  <button v-on:click="sendEvent" type="button" class="btn btn-success">Next</button>
</template>

<script>
  export default {
  name: 'Child',
  data () {
    return {
      response_status: 'accepted'
    }
  },
  methods: {
    sendEvent: function () {
      this.$emit('child-event', 'accepted')
    }
  }

내가 뭘 잘못하고 있는지 알기나 해?

또 다른 설정 방법:on이벤트는 하위 구성요소를 호출하는 위치에서 수신기 메서드를 직접 참조하는 것입니다.

부모 템플릿에서는 다음과 같은 작업을 수행할 수 있습니다.

<Child v-on:child-event="eventIsEmitted"></Child>

온 유저희쪽에서methods:

eventIsEmitted: function(status) {
    if (status == 'accepted') {
        this.stage = 2;
    }
}

언급URL : https://stackoverflow.com/questions/43092448/vuejs-how-to-listen-to-event-from-method-not-from-template