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上被广泛讨论过了。

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

1 个答案: