无法侦听父组件上子组件发出的事件

Question

我有两个这样设置的组件

FirstComponent.vue

<template>
  <second-component @click="doThis" />
</template>

SecondComponent.vue

<template>
  <img @click="doThisSecond" />
<template/>

doThisSecond正常工作时，doThis不会触发。

我也尝试从this.$emit('componentClicked')开始doThisSecond()，但是我无法捕捉到FirstComponent.vue的事件

我想念什么吗？

Answer 1

语法和使用方法

FirstComponent.vue

<template>
  <second-component @doThisSecond="doThis" />
</template>

SecondComponent.vue

<template>
  <img @click="this.$emit("doThisSecond")" />
<template/>

您可以使用方法发送数据

<template>
  <img @click="emitDoThis" />
<template/>

<script>
export default {
data() {
    return {
      person: {
        name: 'Hello',
      }
    };
  },
  methods: {
    emitDoThis() {
      this.$emit('doThisSecond', this.person.name);
    }
  }
</script>