Defining default emit events in a Vue JS component template

Question

I have two nested Vue JS components . The child component emits a few events to the parent function which I define inside the parent component declaration. However these same few events are being called every time I am going to be using the component, so I want to be able to omit having to declare them within the props of the parent component . However I am unsure as to where to move the event declarations in the parent component props.

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

The @change-sort , @edit-row , and @remove-row events will always be defined this way every time I use admin-data-table component, so I want to be able to omit having to declare them.

---

I tried moving them into the template tag of the child component [ admin-data-table ], which did not work.

admin-data.table component:

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

---

Where can I map these into the admin-data-table component itself as defaults?

Answer 1

I hope I am understanding this correctly. You can set property defaults in vue if you specify the properties as objects instead of an Array.

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

VueJS Prop Validation If you look under the object example they show actually how an object needs to return a function as a default prop. You can then overwrite these props with another outside function if you include one.