<template>
  <form>
    <!-- 搜索表單字段配置，可以根據(jù)業(yè)務(wù)需求自定義 -->
    <input v-model="searchText" type="text" placeholder="請(qǐng)輸入搜索關(guān)鍵字" />
    <button @click="handleSearch">搜索</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      // 將搜索關(guān)鍵字通過(guò)自定義事件傳遞給父組件
      this.$emit('search', this.searchText)
    }
  }
}
</script>

<template>
  <ul>
    <!-- 列表數(shù)據(jù)渲染，可以根據(jù)業(yè)務(wù)需求自定義 -->
    <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="handlePrevPage">上一頁(yè)</button>
  <span>{{ currentPage }}</span>
  <button @click="handleNextPage">下一頁(yè)</button>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handlePrevPage() {
      // 將用戶點(diǎn)擊的上一頁(yè)事件通過(guò)自定義事件傳遞給父組件
      this.$emit('prev-page')
    },
    handleNextPage() {
      // 將用戶點(diǎn)擊的下一頁(yè)事件通過(guò)自定義事件傳遞給父組件
      this.$emit('next-page')
    }
  }
}
</script>

<template>
  <div>
    <search-form @search="handleSearch"></search-form>
    <data-list :data-list="listData" :current-page="currentPage" @prev-page="handlePrevPage" @next-page="handleNextPage"></data-list>
  </div>
</template>
<script>
import SearchForm from './SearchForm'
import DataList from './DataList'
export default {
  components: {
    SearchForm,
    DataList
  },
  data() {
    return {
      listData: [],
      currentPage: 1
    }
  },
  methods: {
    handleSearch(keyword) {
      // 發(fā)送請(qǐng)求獲取數(shù)據(jù)
      axios
        .get(`/api/data?keyword=${keyword}&page=${this.currentPage}`)
        .then(response => {
          this.listData = response.data
        })
        .catch(error => {
          console.error(error)
        })
    },
    handlePrevPage() {
      // 處理上一頁(yè)事件
      this.currentPage--
      this.handleSearch()
    },
    handleNextPage() {
      // 處理下一頁(yè)事件
      this.currentPage++
      this.handleSearch()
    }
  }
}
</script>

<template>
  <div>
    <search-list :columns="columns" :page-size="pageSize"></search-list>
  </div>
</template>

import SearchList from './SearchList
export default {
  components: {
    SearchList
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '性別', prop: 'gender' }
      ],
      pageSize: 10
    }
  }
}