Vue 3 - 從插槽內的子組件發出事件

Question

我正在考慮升級到 v3，但很失望地看到 inline-template 已被刪除。 因此，我正在嘗試轉換為使用作用域插槽。

我定義了以下列表組件：

<template>
    <slot :items="filteredItems" :page="page" :totalPages="totalPages" :onPageChanged="onPageChanged"></slot>
</template>

<script>
    export default {
        props: {
            items: {
                type: Array
            },
            initialPage: {
                type: Number,
                default: 1,
            },
            pageSize: {
                type: Number,
                default: 10
            }
        },
        beforeCreate() {
            this.page = this.initialPage;
        },
        computed: {
            filteredItems() {
                return this.items.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
            },
            totalPages() {
                return Math.ceil(this.items.length / this.pageSize);
            }
        },
        methods: {
            onPageChanged(page) {
                console.log('Page changed!!!');

                this.page = page;
            }
        }
    };
</script>

像這樣調用：

<list :items="[ { foo: 'A' }, { foo: 'B' }, { foo: 'C' } ]" :page-size="2" #="{ items, page, totalPages, onPageChanged }">
    <ul class="list-group">
        <li class="list-group-item" v-for="item in items">{{ item.foo }}</li>
    </ul>
    <pager :page="page" :total-pages="totalPages" @pageChanged="onPageChanged"></pager>
</list>

這是尋呼機組件：

<template>
    <ul class="pagination">
        <li class="page-item" v-if="hasPreviousPage"><a href="#" @click="changePage(1)" class="page-link">&laquo;</a></li>
        <li class="page-item" v-if="hasPreviousPage"><a href="#" @click="changePage(page - 1)" class="page-link">&#8249;</a></li>
        <li v-for="page in pages" :class="['page-item', { active: page.isActive }]"><a href="#" @click="changePage(page.name)" class="page-link">{{ page.name }}</a></li>
        <li class="page-item disabled" v-if="page < totalPages - 2"><span class="page-link"> ... </span></li>
        <li class="page-item" v-if="page < totalPages - 2"><a href="#" @click="changePage(totalPages)" class="page-link">{{ totalPages }}</a></li>
        <li class="page-item" v-if="hasNextPage"><a href="#" @click="changePage(page + 1)" class="page-link">&#8250;</a></li>
        <li class="page-item" v-if="hasNextPage"><a href="#" @click="changePage(totalPages)" class="page-link">&raquo;</a></li>
    </ul>
</template>

<script>
    export default {
        props: {
            page: {
                type: Number,
                required: true
            },
            totalPages: {
                type: Number,
                required: true
            }
        },
        computed: {
            hasPreviousPage() {
                return this.page > 1;
            },
            hasNextPage() {
                return this.page < this.totalPages;
            },
            pages() {
                const range = [];

                for (let i = this.page <= 2 ? 1 : this.page - 2; i <= (this.page >= this.totalPages - 2 ? this.totalPages : this.page + 2); i++) {
                    range.push({
                        name: i,
                        isActive: this.page == i
                    });
                }

                return range;
            }
        },
        methods: {
            changePage(page, e = event) {
                e.preventDefault();

                // Trigger the page changed event.
                this.$emit('pageChanged', page);
            }
        }
    };
</script>

但是，每當我嘗試更改頁面時，都會調用changePage方法，該方法會發出pageChanged事件，但它不會調用列表組件中的onPageChanged方法。

如果有人能告訴我我做錯了什么，我將不勝感激。 謝謝

Answer 1

事件名稱應以kebab-case格式書寫，如下所示：

this.$emit('page-changed', page);

並像@page-changed="onPageChanged一樣使用它