Nuxt/Vue-Component 不监听事件

Question

我试图在 Nuxt 组件中触发一个事件，父组件必须在该事件上更改变量。 设置基本上如下：

子组件

触发事件的子组件在它的核心是一个带有一些有效性检查的样式表单。

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

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

这似乎有效。 一旦我通过填写表单更改了表单的有效性，我就可以在我的 Vue-Addon for Firefox 中看到正在触发的事件。

父组件

我试图在其中使用此事件的父组件在它的核心中是一个带有一些样式的 V-Card、一些预定义的东西和一个文本部分内的插槽。

<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 卡，里面有一个表格。 此表单能够检查其有效性并在更改时触发事件。 但是父组件（The V-Card）不响应这种变化。

我知道，我可以将我的 Form 直接移到 V-Card 中，而不是制作两个组件，但是我会失去模块化，我想保留它，因为我将需要更多的 V-Card 和形式并不总是需要的。

Answer 1

我不知道我的第一次尝试是不是因为我做错了什么，或者是否与 NuxtJS 有关，但我找到了一种有效的方法。

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

在父组件中，我删除了 DOM-Element (@event-name="doSomething") 上的侦听器，现在在脚本部分使用以下代码：

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