vue-infinite-loading怎么使用给一个案例，案例需要带 初次加载数据 以及 一个搜索按钮搜索数据

Vue Infinite Loading是一个用于Vue.js的轻量级插件，它提供了无限滚动加载更多数据的功能，非常适合分页或列表展示场景。为了演示如何使用它，我们首先需要安装并引入这个插件到项目中。假设你已经在你的`main.js`或其他入口文件中安装了`vue-infinite-loading`：

npm install vue-infinite-loading

接下来，在你的组件中，比如`MyList.vue`，你可以这样配置：

<template>
  <div id="my-list">
    <ul>
      <!-- 初始数据 -->
      <li v-for="(item, index) in initialData" :key="index">{{ item }}</li>
      <!-- 使用infinite-loading组件 -->
      <infinite-loading :total="totalItems" @load="fetchMoreData">
        <!-- 加载更多数据的部分 -->
        <li v-if="isLoading">正在加载...</li>
      </infinite-loading>
    </ul>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  name: 'MyList',
  components: { InfiniteLoading },
  data() {
    return {
      initialData: [], // 初始数据数组
      totalItems: 0,
      isLoading: false,
    };
  },
  methods: {
    // 初次加载数据函数
    async fetchData() {
      this.isLoading = true;
      const newData = await yourApiCall(); // 这里替换成你的API请求
      this.initialData = [...this.initialData, ...newData];
      this.totalItems += newData.length; // 更新总数据数
      this.isLoading = false;
    },
    
    // 搜索数据函数
    search() {
      this.$emit('load', { skip: this.totalItems }); // 当点击搜索时触发加载更多，跳过已有的数据
    },
    fetchMoreData({ skip }) {
      this.isLoading = true;
      const moreData = await yourApiCallWithSearch(skip); // 这里替换成带有搜索条件的API请求
      this.totalItems += moreData.length; // 更新总数据数
      this.isLoading = false;
      this.initialData = [...this.initialData, ...moreData]; // 添加新数据到初始数据
    },
  },
  mounted() {
    // 初次加载数据
    this.fetchData();
  },
};
</script>

在这个例子中，当你初次打开页面时，会通过`fetchData()`函数加载初次数据。搜索功能通过`search()`方法触发`load`事件，并在`fetchMoreData()`函数中处理搜索后的数据加载。