vue中$emit事件后父组件无法触发

Question

首先说下是直接父子组件的关系，$emit的事件名也不包含大写字母。网上说的这些情况都没法解决，以下是代码

这是子组件：

这是发起$emit的按钮
 <button @click="test">xxx</button>

这是绑定的test方法. 其中$emit第二个参数this.currentData是该子组件的属性，类型是对象数组
 methods: {
    test: function () {
      this.$emit('receivedata', this.currentData)
    }
  },

这是父组件：

监听receivedata事件的地方
<table @receivedata="updateData">...</table>

这是绑定的updateData方法。
 updateData: function (val) {
      // 问题在这里，子组件触发receivedata这个自定义事件时，这两条打印不会被执行
      console.log(val)
      alert(val)
    }

另外Devtools中可以看到子组件emit事件是成功的：

问题在这里：当receivedata监听到子组件点击触发的事件后，父组件调用updateData方法，在这个方法里我试着用console.log和alert输出子组件传递来的值，但是并没有相应的结果出现。求大神帮忙看看是什么问题导致的

Answer 1

table是你引用的子组件么？是类似下面的使用吗？

子组件：

<template>
    <div>
        <button @click="test">xxx</button>
    </div>
</template>
<script>
    export default {
      name: 'table',
      methods: {
        test: function () {
          this.$emit('receivedata', this.currentData)
        }
      },
    }
</script>

父组件：

<template>
    <div>
        <table @receivedata="updateData">...</table>
    </div>
</template>
<script>
    // import ...
    export default {
      name: 'table',
      component: {
          table
      },
      data() {
          return {
              // ...
          }
      },
      methods: {
        test: function () {
          this.$emit('receivedata', this.currentData)
        }
      },
    }
</script>

Answer 2

看你这截图不是父子组件，中间应该隔了一层，所以没接收到事件。你发起emit事件的组件是pagination组件而不是table组件

Answer 3

解决方法：把监听receivedata写在pagination自定义组件上才可以，我误以为是可以写在父组件的任何地方了