从脚本标签vue2中的js代码中聆听自定义事件

Question

我从我的app.vue主要组件的曾孙之一发出自定义事件，如下所示：

this.$emit('logged');

现在我想在我的app.vue主要组件中听这个事件，但我宁愿从<script>标签中的javascript而不是<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代码中侦听自定义事件？我找不到这样的信息。

Answer 1

在文档中阅读Custom Events和Non Parent-Child Communication。

从组件发出的事件不会超过一个级别，因此除非您在每个级别向上代理事件，否则您将无法直接侦听主组件中的孙子组件发出的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。如果您使用的是事件总线，那么您需要以编程方式使用$on()和$off()。我不会解释事件总线模式，因为我确信它已经在SO上广泛讨论过了。