如何在父组件拿到子组件数据实现加载更多

要在父组件中获取子组件数据并实现加载更多，可以考虑使用props和事件监听。

首先，在子组件中定义一个事件，比如叫做loadMore，当子组件需要加载更多数据时，就会触发这个事件。在loadMore事件中，可以将需要加载的数据通过参数的形式传递给父组件。

其次，在父组件中，可以通过props的方式将子组件的数据传递过来，并将其保存在父组件中的一个变量中。当需要加载更多数据时，可以调用子组件中定义的loadMore事件，获取子组件中最新的数据并将其合并到父组件中已有的数据中。

以下是一个示例代码：

在子组件中：

<template>
  <div>
    <!-- 用于显示数据的组件 -->
    <data-component :data="data"></data-component>
    <!-- 加载更多按钮 -->
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [] // 存储子组件数据的数组
    }
  },
  methods: {
    loadMore() {
      // 加载更多数据
      const newData = ...
      // 触发loadMore事件，并将新数据作为参数传递给父组件
      this.$emit('loadMore', newData)
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <!-- 用于显示数据的组件 -->
    <data-component :data="data"></data-component>
    <!-- 加载更多按钮 -->
    <button @click="handleLoadMore">加载更多</button>
  </div>
</template>

<script>
import DataComponent from './DataComponent.vue'

export default {
  components: {
    DataComponent
  },
  data() {
    return {
      data: [] // 存储父组件数据的数组
    }
  },
  methods: {
    handleLoadMore() {
      // 调用子组件中的loadMore事件
      this.$refs.dataComponent.loadMore()
    },
    handleLoadMoreData(newData) {
      // 将新数据合并到父组件中的数据中
      this.data = this.data.concat(newData)
    }
  }
}
</script>

在父组件中，通过refs获取子组件实例，然后调用其loadMore方法触发loadMore事件。当子组件触发loadMore事件时，父组件中定义的handleLoadMoreData方法会被调用，将新数据合并到父组件中的数据中。最终，通过props将合并后的数据传递给子组件进行展示。