在 Vue 父子之间传递事件

Question

我正在尝试从子级发出事件并在父级上监听它，但我总是收到Invalid handler for event "new-tab": got undefined 之类的错误。

我的应用：

<div class="ibox" id="app">
    <div class="ibox-content">
        <h2>Table</h2>
        <div class="details">
            <table-tabs
                    v-on:new-tab="newTab"
                    v-on:close-tab="closeTab"
                    ref="tableTabs"
                    name="table-tabs"
            ></table-tabs>
        </div>
    </div>
</div>

TableTabs 组件：

<template>
    <div>
        <b-card no-body>
            <b-tabs card>
                <b-tab active>
                    <template slot="title">
                        <i class="fa fa-tablet-alt"></i> Orders
                    </template>
                    <orders-table
                            name="orders-table"
                    ></orders-table>
                </b-tab>
                <b-tab v-for="order in tabs" :key="i">
                    <template slot="title">
                        <div>{{ order.name }}</div>
                        <b-button type="button" class="close float-right" aria-label="Close" @click="closeTab(order.id)">
                            <span aria-hidden="true">&times;</span>
                        </b-button>
                    </template>
                    <items-table
                            name="items-table"
                            :api-url="'/api/items/' + order.id"
                    ></items-table>
                </b-tab>
            </b-tabs>
        </b-card>
    </div>
</template>

<script>
    export default {
        name: 'table-tabs',
        data() {
            return {
                tabs: [],
            }
        },
        methods: {
            closeTab(id) {
                for (let i = 0; i < this.tabs.length; i++) {
                    if (this.tabs[i].id === id) {
                        this.tabs.splice(i, 1);
                    }
                }
            },
            newTab(item) {
                this.tabs.push(item);
            }
        }
    }
</script>

OrdersTable 组件：

<template>
    <div>
        <vuetable ref="vuetable"
                  :api-url="apiUrl"
                  :fields="fields"
                  pagination-path="pagination"
                  @vuetable:pagination-data="onPaginationData"
        >
            <div slot="name-slot" slot-scope="{ rowData }">
                <a href="#" class="float-left" @click="newTab(rowData.order)">
                    {{ rowData.order.name }}
                    <span class="fa fa-search-plus"></span>
                </a>
            </div>
        </vuetable>
        <div class="row">
            <div class="col-md-6">
                <vuetable-pagination-info
                        ref="paginationInfo"
                ></vuetable-pagination-info>
            </div>
            <div class="col-md-6">
                <vuetable-pagination-bootstrap
                        ref="pagination"
                        class="pull-right"
                        @vuetable-pagination:change-page="onChangePage"
                ></vuetable-pagination-bootstrap>
            </div>
        </div>
    </div>
</template>

<script>
    import Vuetable from 'vuetable-2/src/components/Vuetable';
    import VuetablePaginationBootstrap from '../VuetablePaginationBootstrap';
    import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo';
    import TableFieldDef from './table-field-def';

    export default {
        name: 'orders-table',
        components: {
            Vuetable,
            VuetablePaginationBootstrap,
            VuetablePaginationInfo
        },
        data() {
            return {
                apiUrl: '/api/orders?include=items',
                fields: TableFieldDef,
            }
        },
        methods: {
            newTab(order) {
                this.$emit('new-tab', order);
            }
        }
    }
</script>

为什么this.$emit('new-tab', order) 总是导致处理程序newTab 未定义。

Vue 2.5.21

Answer 1

在这种情况下，父组件是TableTabs 组件。如果父级需要监听子组件发出的事件，则需要将事件监听器添加到子组件中，在本例中为OrdersTable 组件。所以不是这个..

<table-tabs
  v-on:new-tab="newTab"
  v-on:close-tab="closeTab"
  ref="tableTabs"
  name="table-tabs"
></table-tabs>

您应该这样做（在TableTabs 组件内）..

<orders-table
  name="orders-table"
  v-on:new-tab="newTab"
></orders-table>