Vue 组件 Emits 怎么实现分页页码改变的事件通知-Vue.js-PHP中文网

vue组件分页通过emits通知页码变更：子组件声明emits:['update:page']并调用emit('update:page', newpage)，父组件用v-model:page="currentpage"绑定；也可自定义page-change事件，推荐v-model语法糖。

vue 组件 emits 怎么实现分页页码改变的事件通知

Vue 组件中通过 emits 实现分页页码改变的事件通知，核心是：子组件在页码变化时调用 emit('update:page', newPage)（推荐使用 v-model 语法糖）或 emit('page-change', newPage)（自定义事件名），父组件监听并响应。

使用 v-model 语法糖（推荐 Vue 3）

这是最简洁、符合 Vue 响应式约定的方式。子组件声明支持 v-model:page，内部触发 update:page 事件：

子组件中定义 emits: ['update:page']
当页码被点击或输入更新时，执行 emit('update:page', newPage)
父组件用 v-model:page="currentPage" 绑定，自动监听并同步数据

示例（子组件 Pagination.vue）：

export default {
  props: {
    page: { type: Number, default: 1 },
    total: { type: Number, required: true }
  },
  emits: ['update:page'],
  methods: {
    goTo(page) {
      if (page >= 1 && page 
<font color="#666">父组件使用：</font>
<pre class="brush:php;toolbar:false;"><pagination v-model:page="currentPage" :total="234"></pagination>