阅读量:0
要封装一个加载下一页数据的组件，你可以按照以下步骤进行：
- 创建一个名为 LoadMore 的组件，该组件包含一个按钮或其他交互元素，用于触发加载下一页数据的操作。例如：
<template> <button @click="loadNextPage">加载更多</button> </template> <script> export default { methods: { loadNextPage() { // 在这里触发加载下一页数据的操作 // 可以通过调用父组件传递的方法来实现 this.$emit('load-next-page'); } } } </script> - 在父组件中引入 LoadMore 组件，并传递一个用于加载下一页数据的方法：
<template> <div> <!-- 显示当前页面数据 --> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> <!-- 加载下一页数据的按钮 --> <LoadMore @load-next-page="loadNextPage"></LoadMore> </div> </template> <script> import LoadMore from './LoadMore.vue'; export default { components: { LoadMore }, data() { return { items: [], // 存储当前页面数据 page: 1 // 当前页数 }; }, methods: { loadNextPage() { // 在这里加载下一页数据的方法 // 可以通过接口请求或其他方式获取数据 // 在成功获取数据后，将数据添加到 items 中 this.page++; // 此处为示例，你需要根据实际情况进行修改 this.items = this.items.concat(newData); } } } </script> 这样，当用户点击 LoadMore 组件中的按钮时，父组件中的 loadNextPage 方法会被调用，从而实现加载下一页数据的功能。你可以根据具体需求修改 LoadMore 和父组件中的加载数据逻辑。
