是否可以收听 NuxtChild 事件答案

【问题标题】：Is it possible to listen to NuxtChild event是否可以收听 NuxtChild 事件
【发布时间】：2021-06-20 18:59:47
【问题描述】：

我有一个使用 NuxtChild 组件进行嵌套路由的简单设置：

我有以下文件树：

-| pages/
---| parent/
------| child.vue
------| child2.vue
------| child3.vue
---| parent.vue

我想在父组件中监听来自子组件的事件。我尝试了它应该工作的方式：

<NuxtChild @error="showErrorDialog"/>

在我的组件中：

this.$emit('error');

但它不起作用，showErrorDialog 没有在父组件中触发。是有什么问题还是不可能？

【问题讨论】：

不是真的，它仍然对我不起作用，使用 nuxt-child 或 NuxtChild
什么不起作用？你能更明确一点吗？你在你的 vue 开发工具中看到了发射吗？
根据 vue devtools 似乎触发了该事件，但 NuxtChild 没有捕捉到它
我已经更新了我的答案。这应该有效，请注意您的结构和任何拼写错误。
否则，您完全可以使用$nuxt.$emit 解决方案，即使是<nuxt-child> 标签，也可以！

标签： nuxt.js

【解决方案1】：

<nuxt-child> 可以做到这一点，它应该可以按预期工作：https://stackoverflow.com/a/67817642/8816585

你在 Vue devtools 事件选项卡中看到了什么吗？

不确定我能说什么，它完全适合我。
也许做一个重现，让我们看看是什么问题。

PageCareConfiguration 组件（又名子组件）

<template>
  <div>
    <button @click="$emit('test', 'pizza')">
      test
    </button>
  </div>
</template>

PageCare 组件（又名父级）

<template>
  <div>
    <nuxt-child @test="printConsoleLog"></nuxt-child>
  </div>
</template>

<script>
export default {
  methods: {
    printConsoleLog(name) {
      console.log("printConsoleLog'ed >>", name)
    },
  },
}
</script>

【讨论】：