Vue父组件无法接收子组件触发的事件，如何排查解决？

错误点1：事件监听绑定位置错误 #

你把hidden事件的监听绑在了父组件的外层<div>上，但子组件通过this.$emit("hidden")触发的事件，只会发送给子组件自身的标签（也就是<TestComponent>），而非父组件里的其他元素。

错误点2：子组件模板中方法调用写法错误 #

子组件模板里的v-on:click="this.flip"是错误写法，Vue模板中调用methods里的方法时，不需要加this.，直接写方法名即可。另外模板中访问data属性也无需加this.，虽然不影响功能，但这是规范写法。

修正后的代码 #

TestPage.vue（父组件）

<template>
  <div>
    <!-- 将事件监听绑定到子组件标签上 -->
    <TestComponent v-on:hidden="hiddenEvent"></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>

TestComponent.vue（子组件）

<template>
  <div class="test-container" v-if="!isHidden"
       v-on:click="flip">
    {{ 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>

内容的提问来源于stack exchange，提问作者parsecer