发出的事件不会调用 Vue JS 组件中的父方法

Posted 2023-02-23

【中文标题】发出的事件不会调用 Vue JS 组件中的父方法

【英文标题】：Emitted event doesn't call parent method in Vue JS component

【发布时间】：2019-11-13 12:11:38

【问题描述】：

我有两个嵌套的 Vue JS 组件：'States - Parent' => 'admin-data-table - Child'。

在子组件内部有一个按钮，点击时会向父组件发送一个事件：

子组件 - admin-data-table：

<template>
    <v-data-table :ref="modelName + 'Table'" :value="selectedList" @input="$emit('update:selectedList', $event)" :headers="dataTable.headers" :items="collection" :pagination.sync="dataTable.pagination" select-all item-key="id" class="elevation-1" >
        <template v-slot:items="props">
            <v-btn v-if="!props.item.active" title="Enable" color="success" small @click.prevent="$emit('toggle-active', props.item.id)"><v-icon>domain</v-icon>Enable</v-btn>
            <v-btn v-else title="Disable" color="error" small @click.prevent="$emit('toggle-active', props.item.id)"><v-icon>domain_disabled</v-icon>Disable</v-btn>
        </template>
    </v-data-table>
</template>

父组件内部：

<admin-data-table @toggle-active="toggleActive"></admin-data-table>

这工作正常，发出的'toggle-active' 事件正确地冒泡到父方法。

---

但是我想更改它以包含按钮的命名插槽：

admin-data-table 组件 [child]：

<template>
    <v-data-table :ref="modelName + 'Table'" :value="selectedList" @input="$emit('update:selectedList', $event)" :headers="dataTable.headers" :items="collection" :pagination.sync="dataTable.pagination" select-all item-key="id" class="elevation-1" >
        <template v-slot:items="props">
            <slot name="rowBtns" v-bind:item="props.item"></slot>
        </template>
    </v-data-table>
</template>

父组件内部：

<admin-data-table @toggle-active="toggleActive">
        <template #rowBtns="props">
            <v-btn v-if="!props.item.active" title="Enable" color="success" small @click.prevent="$emit('toggle-active', props.item.id)"><v-icon>domain</v-icon>Enable</v-btn>
            <v-btn v-else title="Disable" color="error" small @click.prevent="$emit('toggle-active', props.item.id)"><v-icon>domain_disabled</v-icon>Disable</v-btn>
        </template>
    </admin-data-table>

---

现在，当我单击按钮时，在发出 toggle-active 事件时，不再调用父组件中的 toggleActive 方法。我确认按下按钮时事件仍在以正确的有效负载发出。

为什么不再触发toggleActive父组件函数了？

<admin-data-table @toggle-active="toggleActive">

【参考方案1】：

Compilation Scope 对此进行了解释。

您的<v-btn> 存在于父组件的模板中，而不是子组件，因此您实际上是在父组件实例而不是子组件实例上调用$emit。

这种情况你不需要使用事件，因为父组件自己管理按钮，所以你可以直接从按钮点击事件中调用toggleActive方法，如下所示：

@click.prevent="toggleActive(props.item.id)"