第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue 3 - 從插槽內(nèi)的子組件發(fā)出事件

Vue 3 - 從插槽內(nèi)的子組件發(fā)出事件

梵蒂岡之花 2023-04-01 16:10:10
我正在考慮升級到 v3,但很失望地看到內(nèi)聯(lián)模板已被刪除。因此,我正在嘗試轉(zhuǎn)換為使用作用域插槽。我定義了以下列表組件:<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都會調(diào)用發(fā)出pageChanged事件的方法,但它不會調(diào)用onPageChanged列表組件中的方法。如果有人能告訴我我做錯了什么,我將不勝感激。謝謝
查看完整描述

1 回答

?
臨摹微笑

TA貢獻1982條經(jīng)驗 獲得超2個贊

kebab-case事件名稱應(yīng)按以下格式編寫:

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

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


查看完整回答
反對 回復(fù) 2023-04-01
  • 1 回答
  • 0 關(guān)注
  • 229 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號