2024年Web前端最新怎样使用vue实现分页组件传参？，一篇文章帮你解答

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

}

.pagination a {

padding: 5px 12px;

border: 1px solid #3ba9ff;

text-decoration: none;

margin: 5px;

}

.pagination a.active {

background: #3ba9ff;

color: white;

}

• {{user.name}}

  <k-pagination :pages=“uPages” @changpage=“changPage” :page=“uPage”>

  然后去实现我们的可复用性组件，这里写成全局的，但是因为根组件只有一个，所以全局或者局部没有影响

  Vue.component(“k-pagination”, {

  props: [‘pages’, ‘page’],

  template: `

  上一页

  下一页

  `,

  methods: {

  gotoPage§ {

  console.log§;

  this.$emit(“changpage”, p);

  },

  prev() {

  if (this.page - 1 > 0) {

  this.$emit(“changpage”, this.page - 1);

  }

  }

  },

  })

  1. props是从父元素接收数据

  2. template里的三个a标签是分别是我们的上一页、页码、下一页

  页码是根据总页数来确定的，所以我们需要接收到总页数

  现在子组件需要这条数据，但是父组件没有，而这个数据是需要计算得来的，所以我们把他写在计算属性里

  computed: {

  uPages() {

  // 总页数 = 数据的个数 / 每页的数量

  return Math.ceil(this.users.length / this.prePage);

  }

  },

  数据准备好后就传递给子组件

  <k-pagination @changpage=“changPage”>

  然后子组件接收数据，并且通过总页数遍历出页数，并给他一个样式

  Vue.component(“k-pagination”, {

  props: [‘pages’],

  template: `

  上一页

  <a href=“” v-for=“p of pages” :class=“{active: page===p}” @click.prevent="gotoPage§> {{p}}

  下一页

  `,

  })

  1. :class="{active: page===p} 这个代码段的意思是当前页数等于我这个页码的时候，说明在现在就在当前页，然后给这个当前页加一个css样式，如果不是则不加"

  2.@click.prevent="gotoPage(p)这个代码段是阻止默认事件，因为a标签的一个默认功能呢个是跳转到指定页面，当我们点击后他就去跳转到href指定的路径，但是由于路径是空的，所以跳转之后就又回来了，造成一个页面刷新了的功能，所以需要给@click加一个修饰符.prevent，阻止默认事件"

  最后

  

  

  资料过多，篇幅有限

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

  ，阻止默认事件"`

  最后

  [外链图片转存中…(img-JYjcRfwo-1714965109099)]

  [外链图片转存中…(img-RnAw1x0l-1714965109099)]

  资料过多，篇幅有限

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。