Vue.js 2.0 分页组件实现与$emit事件通信教程

"这篇教程将介绍如何在Vue.js 2.0中实现一个可复用的分页组件，通过使用$emit进行事件监听和数据传递。这种方法能够避免在多个页面中重复编写相同的分页代码，提高代码的复用性和可维护性。" 在Vue.js中，我们可以通过创建自定义组件来实现这样的功能。首先，我们要创建一个基于Vue构造器的子类，这是通过调用`Vue.extend()`方法来完成的。在这个例子中，我们定义了一个名为`navBar`的组件，它包含一个模板（template）和一些属性（props）、计算属性（computed）以及方法（methods）。 模板（template）定义了分页组件的HTML结构，包括上一页、下一页的链接，以及当前页码列表。`v-if`和`v-for`指令用于根据当前页码（cur）和总页数（all）动态渲染这些元素。例如，当`cur`大于1时显示上一页链接，而`v-for`循环用于生成页码列表。 在`props`中，`['all', 'cur']`表示`all`和`cur`是这个组件从父组件接收的数据，分别代表总页数和当前页码。`computed`属性`indexs`是一个计算属性，它根据当前页码和总页数计算出显示在分页列表中的页码范围，这样可以保持分页列表的简洁性。 `methods`对象中定义了`btnClick`方法，它接受一个参数`da`，这通常是点击页码时传递的页码值。这个方法会在用户点击页码时被触发，然后通过`$emit`向父组件发送一个自定义事件，比如`pageChange`，并将新的页码值作为参数传递。例如，`this.$emit('pageChange', da)`。 在实际使用这个分页组件时，父组件需要监听`pageChange`事件，并更新自己的状态以反映分页的变化。这可以通过在父组件模板中使用`v-on:pageChange`或简写`@pageChange`来实现，将处理函数绑定到这个事件上。 例如，父组件模板可能会这样写： ```html <navbar :all="totalPages" :cur="currentPage" @pageChange="handlePageChange"></navbar> ``` 在父组件的`methods`中，我们需要定义`handlePageChange`方法来响应这个事件： ```javascript methods: { handlePageChange(newPage) { this.currentPage = newPage; // 可能还需要执行其他操作，如重新获取数据 } } ``` 这样，我们就创建了一个可复用的分页组件，它可以轻松地在任何需要分页功能的页面中使用，且通过`$emit`和事件监听机制实现了父组件和子组件之间的通信。这种做法遵循了Vue.js组件化开发的原则，提高了代码的组织性和可重用性。