怎样使用vue实现分页组件传参？

最新推荐文章于 2024-06-07 08:28:37 发布

X可乐

最新推荐文章于 2024-06-07 08:28:37 发布

阅读量1.7k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/105917133

版权

因为这个需求特别多见，经常有，如果多页面比如搭建一个网站，这个分页的按钮，可能不只会出现一次，所以我们把它写在一个可复用的组件里，这样会比较方便。

<!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: ` <div class="pagination">
                    <a href="javascript:;">上一页</a>
                    <a href="">  </a>
                    <a href="javascript:;">下一页</a>
                </div>`,
    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: ` <div class="pagination">
                    <a href="javascript:;">上一页</a>
                    <a href="" v-for="p of pages" :class="{active: page===p}" @click.prevent="gotoPage(p)> {{p}} </a>
                    <a href="javascript:;">下一页</a>
                </div>`,
})

1. :class="{active: page===p} 这个代码段的意思是当前页数等于我这个页码的时候，说明在现在就在当前页，然后给这个当前页加一个css样式，如果不是则不加"
2.@click.prevent="gotoPage(p)这个代码段是阻止默认事件，因为a标签的一个默认功能呢个是跳转到指定页面，当我们点击后他就去跳转到href指定的路径，但是由于路径是空的，所以跳转之后就又回来了，造成一个页面刷新了的功能，所以需要给@click加一个修饰符.prevent，阻止默认事件"

给a标签都添加一个点击事件并在methods里写函数

Vue.component("k-pagination", {
    props: ['pages'],
    template: ` <div class="pagination">
                    <a href="javascript:;" @click="prev">上一页</a>
                    <a href="" v-for="p of pages" :class="{active: page===p}" @click.prevent="gotoPage(p)> {{p}} </a>
                    <a href="javascript:;" @click="next">下一页</a>
                </div>`,
	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'],