时间戳

首页 > 解决方案 > 无法在父组件上监听子组件发出的事件

vue.js - 无法在父组件上监听子组件发出的事件

问题描述

我有两个这样设置的组件

FirstComponent.vue

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

SecondComponent.vue

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

虽然doThisSecond确实有效，doThis但不会触发。

我也尝试过，但我无法this.$emit('componentClicked')从doThisSecond()FirstComponent.vue

我错过了什么吗？

标签： vue.js

解决方案

语法和使用方法

第一个组件.vue

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

第二组件.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>

推荐阅读