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'事件会冒泡直到父方法正确。

但是我想更改它以为按钮合并一个命名槽：

管理数据表组件[子级]：

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

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

为什么这不再触发toggleActive父组件功能？

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

Answer 1

这在Compilation Scope中有解释。

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

在这种情况下，您无需使用事件，因为父组件正在管理按钮本身，因此您可以像这样从按钮单击事件中直接调用toggleActive方法：

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

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

1 个答案: