스크립트 태그 vue2의 js 코드에서 사용자 지정 이벤트 듣기

스크립트 태그 vue2의 js 코드에서 사용자 지정 이벤트 듣기

나는 증손자 중 한 명으로부터 관습적인 행사를 한다.app.vue주요 컴포넌트는 다음과 같습니다.

this.$emit('logged');

그리고 지금 이 이벤트를 듣고 싶은데app.vue메인 컴포넌트이지만 저는 javascript에서 하고 싶습니다.<script>태그가 아닌<template>:

<template>
    <div>
        <app-header></app-header>
        <router-view></router-view>
        <app-footer></app-footer>
  </div>
</template>

<script>
    import header from './components/shared/header.vue';
    import footer from './components/shared/footer.vue';

    export default {
        components: {
            'app-header': header,
            'app-footer': footer
        }
    }

// can I listen to custom events somewhere here above?
</script>

vue 2에서 js code에서 커스텀 이벤트를 들을 수 있나요?나는 그런 정보를 찾을 수 없었다.

문서에서 커스텀 이벤트와 부모-자녀가 아닌 통신을 확인.

컴포넌트에서 방출되는 이벤트는 2개 이상의 레벨에서 버블이 발생하지 않기 때문에 직접 수신할 수 없습니다.logged이벤트를 각 레벨에서 위쪽으로 프록시하지 않는 한 증손자 구성 요소가 주 구성 요소에서 내보내는 이벤트.

또는 이벤트버스를 부모 자녀 이외의 통신에 사용할 수도 있습니다(위 링크 참조).

코드로 이벤트를 수신하는 방법은 다음과 같습니다.

<template>
  <div>
    <my-component ref="mycomp"></my-component>
  </div>
</template>

<script>

export default {
  mounted() {
    // You need to have a reference to the component you want to listen to
    // which is why I'm using refs here
    this.$refs.mycomp.$on('logged', () => {
      alert('Got logged event');
    });
  }
}

</script>

하지만 위의 상황에서는 그냥 사용하세요.v-on이벤트 버스를 사용하는 경우 를 사용하여 프로그래밍해야 합니다.이벤트 버스 패턴은 SO에 대해 이미 많이 논의되었을 것이기 때문에 설명하지 않겠습니다.

언급URL : https://stackoverflow.com/questions/47915048/listen-to-custom-event-from-js-code-in-script-tags-vue2