vue组件传值实现分页

Vue 组件传值实现分页

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

使用props和$emit

父组件通过props向子组件传递数据，子组件通过$emit向父组件发送事件。

父组件模板：

<template>
  <div>
    <child-component 
      :current-page="currentPage" 
      :total-pages="totalPages"
      @page-change="handlePageChange"
    />
  </div>
</template>

父组件脚本：

export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      // 这里可以添加获取新数据的逻辑
    }
  }
}

子组件模板：

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

子组件脚本：

export default {
  props: {
    currentPage: Number,
    totalPages: Number
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('page-change', this.currentPage - 1)
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('page-change', this.currentPage + 1)
      }
    }
  }
}

使用v-model

对于更简洁的语法，可以使用v-model实现双向绑定。

父组件模板：

<template>
  <div>
    <child-component v-model="currentPage" :total-pages="totalPages" />
  </div>
</template>

子组件脚本：

export default {
  props: {
    value: Number,
    totalPages: Number
  },
  methods: {
    updatePage(newPage) {
      this.$emit('input', newPage)
    }
  }
}

使用Vuex状态管理

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

store模块：

const paginationModule = {
  state: {
    currentPage: 1,
    totalPages: 10
  },
  mutations: {
    SET_CURRENT_PAGE(state, page) {
      state.currentPage = page
    }
  },
  actions: {
    updatePage({ commit }, page) {
      commit('SET_CURRENT_PAGE', page)
    }
  }
}

组件中使用：

export default {
  computed: {
    currentPage: {
      get() {
        return this.$store.state.pagination.currentPage
      },
      set(value) {
        this.$store.dispatch('updatePage', value)
      }
    },
    totalPages() {
      return this.$store.state.pagination.totalPages
    }
  }
}

使用事件总线

对于非父子关系的组件，可以使用事件总线进行通信。

创建事件总线：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送事件的组件：

import { EventBus } from './event-bus.js'

EventBus.$emit('page-change', newPage)

接收事件的组件：

import { EventBus } from './event-bus.js'

EventBus.$on('page-change', (page) => {
  this.currentPage = page
})

使用provide/inject

对于深层嵌套的组件，可以使用provide/inject。

祖先组件：

export default {
  provide() {
    return {
      pagination: {
        currentPage: this.currentPage,
        setCurrentPage: this.setCurrentPage
      }
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    setCurrentPage(page) {
      this.currentPage = page
    }
  }
}

后代组件：

export default {
  inject: ['pagination'],
  methods: {
    handlePageChange(page) {
      this.pagination.setCurrentPage(page)
    }
  }
}

每种方法都有其适用场景，props/$emit适合父子组件通信，v-model简化了双向绑定，Vuex适合大型应用状态管理，事件总线适合非父子组件通信，provide/inject适合深层嵌套组件。根据项目需求选择合适的方法。