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', page);

并像使用它@page-changed="onPageChanged