Vue组件同一页面复用失效：仅最后一个组件加载数据

核心错误 #

你在子组件的created钩子中直接写self = this，没有用let或const声明变量，导致self变成全局变量。当两个子组件先后执行created时，第二个组件的self = this会覆盖第一个的全局self。等两个请求返回时，最终都是给最后一个组件的items赋值，所以只有最后一个组件能显示数据。

修复方案 #

有两种简单的修复方式：

方式1：将self声明为局部变量

在self前添加const或let，把它限定在当前组件的created作用域内：

created() {
  const self = this;
  axios.get('***?limit=' + this.limit).then(res => self.items = res.data);
}

方式2：使用箭头函数（更推荐）

箭头函数会自动继承外部作用域的this，无需额外声明self，代码更简洁：

created() {
  axios.get('***?limit=' + this.limit).then(res => {
    this.items = res.data;
  });
}

额外验证 #

修复后可打开浏览器开发者工具的网络面板，确认两个请求的limit参数分别为10和20，确保后端返回对应数量的数据。

内容的提问来源于stack exchange，提问作者randomDud