我有两个组件-父组件和子组件。子组件发出一个事件，该事件应该触发父组件中的控制台输出。但是，控制台中没有打印任何内容。

测试页面版本：

<template>
  <div v-on:hidden="hiddenEvent">

    <TestComponent></TestComponent>
  </div>
</template>

<script>

import TestComponent from "@/app/test/TestComponent";
export default {
  name: "TestPage",
  components: {TestComponent},

  methods:  {
    hiddenEvent()  {
      console.log("hiddenEvent");
    }
  }
}
</script>

<style scoped>

</style>

测试组件版本：

<template>
  <div class="test-container" v-if="!isHidden"
        v-on:click="this.flip">
    {{this.text}}
  </div>
</template>

<script>
export default {
  name: "TestComponent",

  data() {
    return {
      text: "abc",
      isHidden: false
    }
  },

  methods:  {
    flip()  {
      this.isHidden = !this.isHidden;

      if (this.isHidden)  {
        this.$emit("hidden");
      } else  {
        this.$emit("revealed");
      }
    }
  }
}
</script>

<style scoped>

.test-container  {
  padding: 2em;

  background-color: #2EAC68;
}

</style>

当我单击abc时：

它消失了：

所以我知道flip方法被执行了，但是父级的hiddenEvent没有被执行，因为hiddenEvent从来没有被输出到控制台。
我做错了什么？我需要父TestPage能够响应子TestComponent发出的事件