在脚本标签 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 and Non Parent-Child Communication。

组件发出的事件不会向上冒泡超过一级，因此您将无法直接监听主组件的曾孙组件发出的 logged 事件，除非您代理事件在每个级别向上。

或者，您可以使用事件总线进行非父子通信（参见上文 link）。

这是您在代码中监听事件的方式：

<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() and $off()。我不会解释事件总线模式，因为我确信它已经在 SO 上被广泛讨论了。

在脚本标签 vue2 中监听来自 js 代码的自定义事件

Listen to custom event from js code in script tags vue2

javascript

events

custom-events

vue.js

vuejs2