How to listen for a page $emit in a nuxt layout?

在 Nuxt.js 中监听 $emit 事件，通常是指在父子组件之间的通信。父组件可以使用 $emit 来发送事件，而子组件可以监听这些事件并作出相应。以下是一个具体的步骤和示例，说明如何在 Nuxt.js 中实现这一功能：

步骤 1: 创建父组件

在父组件中，你可能会有一个按钮或某种触发器，当用户与之交互时，会触发 $emit 事件。

vue
<template>
  <div>
    <button @click="sendEvent">点击我发送事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      this.$emit('custom-event', '这是传递的数据');
    }
  }
}
</script>

在上面的例子中，当按钮被点击时，sendEvent 方法会被调用，并通过 $emit 发送名为 custom-event 的事件，同时传递了一些数据（在这个例子中是一个字符串）。

步骤 2: 创建子组件

子组件需要监听从父组件传来的事件，并定义如何响应这些事件。

vue
<template>
  <div>
    <p>接收到的数据: {{ eventData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventData: ''
    }
  },
  mounted() {
    this.$parent.$on('custom-event', this.handleEvent);
  },
  beforeDestroy() {
    // 记得在组件销毁前移除事件监听，避免内存泄漏
    this.$parent.$off('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      this.eventData = data;
    }
  }
}
</script>

在这个子组件中，我们在 mounted 钩子函数中通过 this.$parent.$on 监听来自父组件的 custom-event 事件。handleEvent 方法被用作事件处理器，用于接收数据并将其存储在组件的 data 中。

步骤 3: 组合使用

确保在父组件中导入并注册子组件，然后在模板中使用。

vue
<template>
  <div>
    <ChildComponent />
    <button @click="sendEvent">点击我发送事件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendEvent() {
      this.$emit('custom-event', '这是传递的数据');
    }
  }
}
</script>

这样一来，当在父组件中点击按钮时，子组件将能够监听到事件并作出反应。

归纳

这种父子组件间通过 $emit 和事件监听的方法是 Vue.js 组件通信的常见模式，Nuxt.js 作为 Vue 的一个框架，同样适用这种模式。通过这种方式可以很容易地在组件之间传递数据和消息，同时保持组件的解耦和复用性。