在 Vue JS 组件模板中定义默认发出事件

Question

我有two nested Vue JS components。子组件向我在父组件声明中定义的父函数发出一些事件。然而，每次我要使用该组件时，都会调用这些相同的几个事件，所以I want to be able to omit having to declare them within the props of the parent component。但是我不确定在父组件道具中将事件声明移动到哪里。

    <admin-data-table
        :dataTable="dataTable"
        :modelName="modelName"
        :collection="collection"
        :tblShowFields="tblShowFields"
        :selectedList.sync="selected"
        @change-sort="changeSort"
        @edit-row="edit"
        @remove-row="remove"
    ></admin-data-table>

每次我使用admin-data-table 组件时，@change-sort、@edit-row 和 @remove-row 事件将始终以这种方式定义，因此我希望能够省略必须声明它们。

---

我尝试将它们移动到子组件 [admin-data-table] 的模板标签中，但没有成功。

admin-data.table 组件：

<template 
    @change-sort="changeSort"
    @edit-row="edit"
    @remove-row="remove">
    <v-flex xs12>
        <v-progress-linear :indeterminate="true" :height="3" color="#c79121" :active="dataTable.loadingVal" class="mb-0 mt-5"></v-progress-linear>
        <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:headers="props">
                <tr>
                    <th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAllSelected"></v-checkbox></th>
                    <th v-for="header in props.headers" :key="header.text"
                        :class="['column sortable', dataTable.pagination.descending ? 'desc' : 'asc', header.value === dataTable.pagination.sortBy ? 'active' : '']"
                        @click="$emit('change-sort', header.value)">
                        <v-icon small>arrow_upward</v-icon>
                        {{ header.text }}
                    </th>
                </tr>
            </template>
            <template v-slot:items="props">
                <tr :active="props.selected">
                    <td class="text-center align-middle" @click="props.selected = !props.selected">
                        <v-checkbox :input-value="props.selected" primary hide-details color="#c79121"></v-checkbox>
                    </td>
                    <td v-for="(field, key) in props.item" v-if="tblShowFields.includes(key)">{{ field }}</td>
                    <td class="text-right align-middle">
                        <v-btn
                            v-for="(btn, i) in dataTable.rowButtons" :key="i"
                                :title="btn.title"
                                :color="btn.color" fab small
                                @click="btn.click">
                        <v-icon>{{ btn.icon }}</v-icon></v-btn>
                        <v-btn title="Edit" color="primary" fab small @click="$emit('edit-row', props.item.id)"><v-icon>edit</v-icon></v-btn>
                        <v-btn title="Delete" color="error" fab small class="text-white" @click="$emit('remove-row', props.item.id)"><v-icon>delete_outline</v-icon></v-btn>
                    </td>
                </tr>
            </template>
            <template slot="no-data">
                <p class="text-xs-center">No Data</p>
            </template>
        </v-data-table>
    </v-flex>
</template>

<script>
    export default {
        name: "admin-data-table",
        props: [
            'dataTable',
            'collection',
            'modelName',
            'collection',
            'selectedList',
            'tblShowFields'
        ]
    }
</script>

---

我在哪里可以将这些映射到 admin-data-table 组件本身作为默认值？

Answer 1

我希望我理解正确。如果将属性指定为对象而不是数组，则可以在 vue 中设置属性默认值。

props:{
    'edit-row':{
       type:Function,
       default: (itemID) => { //function logic}
     }
}

VueJS Prop Validation 如果您查看对象示例，它们实际上会显示对象如何需要将函数作为默认道具返回。然后，如果您包含一个外部函数，则可以使用另一个外部函数覆盖这些道具。