Выпущенное событие не вызывает родительский метод в компоненте Vue JS - PullRequest
Новая
       28

Выпущенное событие не вызывает родительский метод в компоненте Vue JS

3 голосов
/ 02 июля 2019

У меня есть два вложенных компонента 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">

1 Ответ

1 голос
/ 03 июля 2019

Это объясняется в Область компиляции .

Ваш <v-btn> существует в шаблоне родителя, а не дочернего элемента, поэтому вы на самом деле вызываете $emit в экземпляре родительского компонента, а не в дочернем.

Вам не нужно использовать события для этой ситуации, так как родительский компонент сам управляет кнопкой, поэтому вы можете напрямую вызвать метод toggleActive из события нажатия кнопки, например: 

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