Javascript 侦听VueJS父组件中的事件以调用方法

我的VueJS 2应用程序包含一个父组件和一个子组件。父对象将名为items的道具传递给子对象

当用户单击子组件中的按钮时，会发出如下刷新事件：

$emit('refresh', category.id)

我希望在父组件中侦听此事件，如果收到该事件，则触发一个方法，例如警报

据我所知，v-on侦听器可以连接到按钮或其他设备。问题是，我的父组件没有类似于此的按钮

为了让事情更清楚，我在想：

父组件已加载。它调用一个getData函数，该函数的结果作为道具传递给子组件。 用户单击子组件中的按钮。 子组件触发一个事件。 父组件再次调用getData并更新传递给子组件的道具。

---

假设子组件中有如下代码：

  <button v-on:click="$emit('refresh', category.id)" ...

---

假设子组件中有如下代码：

  <button v-on:click="$emit('refresh', category.id)" ...

---

实际上，你不需要一个按钮。我会给你看代码

ParentComponent.vue：

<child-comp @refresh="refreshFunc" />


methods: {
  refreshFunc (categoryId) {
    // here you go
  }
}

  this.$emit('refresh', categoryId)

---

实际上，你不需要一个按钮。我会给你看代码

ParentComponent.vue：

<child-comp @refresh="refreshFunc" />


methods: {
  refreshFunc (categoryId) {
    // here you go
  }
}

  this.$emit('refresh', categoryId)

---

啊，我现在明白我的问题了。您的代码运行良好。在我的例子中，我没有看到$emit是从另一个组件调用的，也就是说，我的父组件没有收到它，因为它实际上是祖父母组件。如果您有一个复杂的情况，您必须在组件之间共享相同的数据，我建议使用Observable API，就像它解释的那样，我的代码中有一个隐藏得很好的错误。你的建议很管用：-啊，我现在明白我的问题了。您的代码运行良好。在我的例子中，我没有看到$emit是从另一个组件调用的，也就是说，我的父组件没有收到它，因为它实际上是祖父母组件。如果您有一个复杂的情况，您必须在组件之间共享相同的数据，我建议使用Observable API，就像它解释的那样，我的代码中有一个隐藏得很好的错误。你的建议很管用：-你的答案和我选择的答案几乎一样。谢谢你的帮助。你的答案和我选择的几乎一样。谢谢你的帮助。