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

Question

我有两个嵌套的 Vue JS 组件:'States - Parent' => '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">
            <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 组件[子]:

<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">

Answer 1

这在 Compilation Scope 中有解释.

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

对于这种情况，您不需要使用事件，因为父组件正在管理按钮本身，因此您可以直接调用 toggleActive按钮点击事件的方法如下:

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