Nuxt / Vue组件未监听事件

Question

我正在尝试在Nuxt组件中触发事件，父组件必须在该事件上更改变量。 安装程序基本上如下：

儿童组件

引发事件的子组件位于其核心的样式表中，并进行了有效性检查。

<template>
  <v-form v-model="valid">
    ...
  </v-form>
</template>

<script>
...
  data: {
    valid: false
  },
  watch: {
    valid() {
      this.$emit('update-validity', this.valid);
    },
  },
...
</script>

这似乎有效。通过填写表单更改表单的有效性后，我可以在用于Firefox的Vue插件中看到该事件。

父项

我要在其中使用此事件的Parent-Component位于它的核心V-Card中，该V-Card具有一些样式，一些预定义的内容以及一个在Text-Part内的插槽。

<template>
  <v-card>
    ...
    <v-card-text>
      <slot></slot>
    </v-card-text>
    ...
  </v-card>
</template>

页面

页面看起来像这样：

<template>
  <div>
    <ParentComponent @update-validity="doSomething">
      <ChildComponent>
      </ChildComponent>
    </ParentComponent>
  <div>
</template>

明智的，这可行。我的确实现了带有其中的表格的V卡。此表单可以检查其有效性并在更改时触发事件。但是父组件（V卡）无法响应此更改。

我知道，我可以将表格直接移动到V卡中，而不是制作两个组件，但是我会放弃我想保留的模块化，因为我将非常需要V卡还有更多内容，但并不总是需要该表格。

Answer 1

我不知道我的第一次尝试是否没有成功，因为我做了一些天生的错误，或者是否与NuxtJS有关，但是我找到了一种可行的方法。

我现在在子组件中通过$nuxt.$emit('event-name', payload)而不是this.$emit('event-name', payload)发出事件。

在父组件中，我删除了DOM元素上的侦听器（@ event-name =“ doSomething”），现在在脚本部分中使用以下代码：

...
created() {
  this.$nuxt.$on('event-name', (payload) => {
    // Do Something with payload
  )};
},
...