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

Question

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

当用户单击子组件中的按钮时，它将发出一个refresh事件，如下所示：

$emit('refresh', category.id)

我想在父组件中侦听此事件，如果接收到该事件，则触发一个方法，例如alert()。

据我了解，v-on侦听器可以附加到例如一个按钮，否则。问题是我的父组件对此没有按钮。

为了使事情更清楚，这就是我在想什么：

1. 父组件已加载。它调用getData()函数，该结果作为prop传递给子组件。
2. 用户单击子组件中的按钮。
3. 子组件触发事件。
4. 父组件再次调用getData()并更新了传递给孩子的道具。

Answer 1

假设您在子组件中有类似以下代码：

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

在父母中，您应该有这个

                     <child v-on:refresh="refreshParent"   />
 event emitted from child  ---------^       ^-------- its handler method in the parent 

在父方法中：

  methods:{
    refreshParent(idCateg){
        this.getData()
     }
  ....
  }

Answer 2

您实际上不需要为此目的的按钮。我将尝试向您显示代码

ParentComponent.vue：

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


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

ChildComponent.vue：

  this.$emit('refresh', categoryId)