怎样使用vue实现分页组件传参？
因为这个需求特别多见，经常有，如果多页面比如搭建一个网站，这个分页的按钮，可能不只会出现一次，所以我们把它写在一个可复用的组件里，这样会比较方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pagination {
margin: 20px 0;
}
.pagination a {
padding: 5px 12px;
border: 1px solid #3ba9ff;
text-decoration: none;
margin: 5px;
}
.pagination a.active {
background: #3ba9ff;
color: white;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="user of showUsers" :key="user.id">
{{user.name}}
</li>
</ul>
<k-pagination :pages="uPages" @changpage="changPage" :page="uPage"></k-pagination>
</div>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
users: [
{id: 1, name: '光达'},
{id: 2, name: '小涛'},
{id: 3, name: '小冯'},
{id: 4, name: '小金'},
{id: 5, name: '小宝'},
{id: 6, name: '祥子'},
{id: 7, name: '大武'},
],
uPage: 1, // 当前和已有的数据没有太多关联，只会和用户的行为关联，所以它不算是派生的
prePage: 2, // 每页显示多少条
},
});
</script>
</body>
</html>
然后去实现我们的可复用性组件，这里写成全局的，但是因为根组件只有一个，所以全局或者局部没有影响
Vue.component("k-pagination", {
props: ['pages', 'page'],
template: ` `,
methods: {
gotoPage(p) {
console.log(p);
this.$emit("changpage", p);
},
prev() {
if (this.page - 1 > 0) {
this.$emit("changpage", this.page - 1);
}
}
},
})
- props是从父元素接收数据
- template里的三个a标签是分别是我们的上一页、页码、下一页
页码是根据总页数来确定的，所以我们需要接收到总页数
现在子组件需要这条数据，但是父组件没有，而这个数据是需要计算得来的，所以我们把他写在计算属性里
computed: {
uPages() {
// 总页数 = 数据的个数 / 每页的数量
return Math.ceil(this.users.length / this.prePage);
}
},
数据准备好后就传递给子组件
<k-pagination @changpage="changPage"></k-pagination>
然后子组件接收数据，并且通过总页数遍历出页数，并给他一个样式
Vue.component("k-pagination", {
props: ['pages'],
template: ` `,
})
1. :class="{active: page===p} 这个代码段的意思是当前页数等于我这个页码的时候，说明在现在就在当前页，然后给这个当前页加一个css样式，如果不是则不加"
[email protected]="gotoPage(p)这个代码段是阻止默认事件，因为a标签的一个默认功能呢个是跳转到指定页面，当我们点击后他就去跳转到href指定的路径，但是由于路径是空的，所以跳转之后就又回来了，造成一个页面刷新了的功能，所以需要给@click加一个修饰符.prevent，阻止默认事件"
给a标签都添加一个点击事件并在methods里写函数
Vue.component("k-pagination", {
props: ['pages'],
template: ` `,
methods: {
gotoPage(p) {
this.$emit("changpage", p);
},
prev() {
if (this.page - 1 > 0) {
this.$emit("changpage", this.page - 1);
}
},
next() {
if (this.page < this.pages) {
this.$emit("changpage", this.page + 1);
}
},
},
})
然后组件调用时级的监听changpage，以及准备一些changPage这个函数
<k-pagination :pages="uPages" @changpage="changPage" :page="uPage"></k-pagination>
methods: {
changPage(page) {
console.log("我是子组件传过来的：", page);
this.uPage = page;
}
},
基础功能大部分都已经实现了，我们现在处理一下每页显示的内容条数
computed: {
uPages() {
// 总页数 = 数据的个数 / 每页的数量
return Math.ceil(this.users.length / this.prePage);
},
showUsers() {
let start = (this.uPage - 1) * this.prePage;
//截取数组 开始的位置 ， 结束的位置
return this.users.slice(start, start + this.prePage);
}
},
现在的需求是，点谁让谁亮，那点击谁，谁就是当前页，所以我们需要当前页，我们就把当前页传过来，让子组件接收一下
<k-pagination :pages="uPages" @changpage="changPage" :page="uPage"></k-pagination>
props: ['pages', 'page'],