监听VueJS父组件中的事件调用方法

Question

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

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

$emit('refresh', category.id)

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

据我了解， “ v-on监听器可以附加到例如按钮或其他位置。 问题是我的父组件没有类似按钮的东西。

为了让事情更清楚，这就是我的想法：

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

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

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

父组件.vue：

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


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

ChildComponent.vue：

  this.$emit('refresh', categoryId)