내보낸 이벤트가 Vue JS 구성 요소의 상위 메서드를 호출하지 않음

내보낸 이벤트가 Vue JS 구성 요소의 상위 메서드를 호출하지 않음

두 개의 중첩된 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>

---

이제 버튼을 클릭했을 때toggleActive상위 컴포넌트의 메서드가 호출되지 않게 된 경우toggle-active이벤트가 출력됩니다.버튼을 눌렀을 때, 올바른 페이로드로 이벤트가 아직 송신되고 있는 것을 확인했습니다.

이게 왜 이 버젼의toggleActive부모 컴포넌트 기능이 없어졌습니까?

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

이는 컴파일 범위에 설명되어 있습니다.

당신의.<v-btn>서브가 아닌 부모 템플릿 내에 존재하기 때문에 실제로 콜을 발신하고 있다.$emit상위 컴포넌트 인스턴스에서 사용할 수 있습니다.

부모 컴포넌트가 버튼 자체를 관리하고 있기 때문에 이 상황에서는 이벤트를 사용할 필요가 없습니다.따라서 직접toggleActive버튼 클릭이벤트에서 다음과 같은 방법을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/56859351/emitted-event-doesnt-call-parent-method-in-vue-js-component