Vue 3 - 从插槽内的子组件发出事件

Question

我正在考虑升级到 v3，但很失望地看到内联模板已被删除。因此，我正在尝试转换为使用作用域插槽。

我定义了以下列表组件：

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

但是，每当我尝试更改页面时，changePage都会调用发出pageChanged事件的方法，但它不会调用onPageChanged列表组件中的方法。

如果有人能告诉我我做错了什么，我将不胜感激。谢谢

Answer 1

kebab-case事件名称应按以下格式编写：this.$emit('page-changed',&nbsp;page);并像使用它@page-changed="onPageChanged