当前位置：首页 > VUE

vue组件传值实现分页

2026-01-12 05:46:30VUE

Vue组件传值实现分页的方法

在Vue中实现分页功能，通常需要父子组件之间的数据传递。以下是几种常见的传值方式：

使用props传递数据

父组件通过props向子组件传递当前页码和总页数等分页信息：

<!-- 父组件 -->
<template>
  <div>
    <pagination 
      :current-page="currentPage" 
      :total-pages="totalPages"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import Pagination from './Pagination.vue'

export default {
  components: { Pagination },
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      // 这里可以触发数据加载
    }
  }
}
</script>

<!-- 子组件 Pagination.vue -->
<template>
  <div class="pagination">
    <button 
      v-for="page in totalPages" 
      :key="page"
      @click="$emit('page-change', page)"
      :class="{ active: page === currentPage }"
    >
      {{ page }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: {
      type: Number,
      required: true
    }
  }
}
</script>

使用自定义事件

子组件通过$emit触发事件，父组件监听这些事件来更新分页状态：

<!-- 子组件 -->
<template>
  <div>
    <button @click="prevPage">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  props: ['currentPage', 'totalPages'],
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('update:currentPage', this.currentPage - 1)
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('update:currentPage', this.currentPage + 1)
      }
    }
  }
}
</script>

使用v-model实现双向绑定

可以利用v-model简化父子组件间的双向数据绑定：

<!-- 父组件 -->
<template>
  <div>
    <pagination v-model="currentPage" :total-pages="totalPages" />
  </div>
</template>

<script>
import Pagination from './Pagination.vue'

export default {
  components: { Pagination },
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <input 
      type="number" 
      :value="value" 
      @input="$emit('input', $event.target.value)"
      min="1" 
      :max="totalPages"
    >
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    totalPages: Number
  }
}
</script>

使用Vuex管理分页状态

对于大型应用，可以使用Vuex集中管理分页状态：

// store.js
export default new Vuex.Store({
  state: {
    currentPage: 1,
    totalPages: 10
  },
  mutations: {
    SET_CURRENT_PAGE(state, page) {
      state.currentPage = page
    }
  },
  actions: {
    changePage({ commit }, page) {
      commit('SET_CURRENT_PAGE', page)
      // 这里可以dispatch加载数据的action
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div>
    <button @click="changePage(currentPage - 1)">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="changePage(currentPage + 1)">下一页</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['currentPage', 'totalPages'])
  },
  methods: {
    ...mapActions(['changePage'])
  }
}
</script>

使用provide/inject

对于深层嵌套的组件，可以使用provide/inject来传递分页数据：

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      pagination: {
        currentPage: this.currentPage,
        totalPages: this.totalPages,
        changePage: this.changePage
      }
    }
  },
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page
    }
  }
}
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['pagination'],
  methods: {
    handlePageClick(page) {
      this.pagination.changePage(page)
    }
  }
}
</script>

每种方法都有其适用场景，可以根据项目复杂度和组件关系选择最合适的实现方式。对于简单场景，props和自定义事件就足够；对于复杂应用，Vuex可能是更好的选择。

vue组件传值实现分页