如何利用 Props 实现无限滚动加载的状态同步？交互开发指南-Vue.js-PHP中文网

核心是父组件统一管理加载状态并透传props，子组件通过事件回调驱动更新：loading控制动画、noMore禁用触发、error支持重试，page由父组件递增，子组件只读不改，事件触发后父组件执行请求与状态更新。

如何利用 props 实现无限滚动加载的状态同步？交互开发指南

核心在于父组件统一管理加载状态（如 loading、noMore、error），并通过 props 向子组件透传，同时子组件通过事件回调通知父组件状态变更，形成单向数据流+事件驱动的闭环。

父组件集中维护状态与逻辑

所有关键状态必须由父组件定义并响应式管理，避免子组件自行维护导致不一致：

loading：标识当前是否处于加载中，控制加载指示器显隐
noMore：标识数据已全部加载完毕，禁用后续触发
error：标识上一次加载失败，可支持重试逻辑
page / offset：分页参数，由父组件递增并传入请求函数

子组件仅接收 props，不修改状态

无限滚动子组件（如或自定义封装）应严格遵循“只读 props”原则：

包阅AI

包阅AI是一款面向文档、网页和论文阅读的 AI 阅读助手。

下载

通过 :loading="loading" 控制内部 loading 动画
通过 :disabled="noMore || error" 禁用自动触发或显示“到底了”提示
不直接修改 loading 或 noMore，而是调用 $emit('load') 通知父组件
若使用 vue-infinite-loading，其 on-infinite 回调接收的是 StateChanger 实例，仅用于标记结果（$state.loaded() / $state.complete()），不改变父组件原始状态变量

事件回调驱动状态更新与副作用

子组件触发加载时，应通过标准事件将意图抛出，由父组件执行真实逻辑：

监听子组件的 @load 或 @infinite 事件
在事件处理器中：设置 loading = true → 发起 API 请求 → 根据响应更新 data、noMore、error

示例逻辑：

handleLoad() {
  this.loading = true;
  fetchMore(this.page + 1)
    .then(res => {
      this.list = [...this.list, ...res.items];
      this.noMore = res.total  {
      this.error = true;
    })
    .finally(() => {
      this.loading = false;
    });
}