我正在考虑升级到 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列表组件中的方法。
如果有人能告诉我我做错了什么，我将不胜感激。谢谢
临摹微笑
相关分类