Определение событий выброса по умолчанию в шаблоне компонента 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>

События @change-sort, @edit-row и @remove-row всегда будут определяться таким образом каждый раз, когда яиспользуйте компонент admin-data-table, поэтому я хочу иметь возможность пропустить их объявление.

---

Я попытался переместить их в тег шаблона дочернего компонента [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 Если вы посмотрите под примером объекта, на самом деле он показывает, как объектНужно вернуть функцию в качестве опоры по умолчанию.Затем вы можете перезаписать эти реквизиты другой внешней функцией, если вы включите ее.