编程题：定义一个vue分页组件，实现客户端分页功能如下图：要求：（1）定义一个组件名称Btn.vue，在组件中定义 一个页码按钮，接收父组件传值页码数值 例如（2）定义父组件Product.vue，父

在Vue中定义一个分页组件通常涉及到创建两个部分：一个是子组件，用于展示和处理分页按钮；另一个是父组件，用于传递分页数据和处理分页逻辑。以下是一个简单的实现方式：

首先，我们定义一个名为`Btn.vue`的子组件，它会接收一个名为`page`的prop，这个prop将代表当前的页码数值。

<!--Btn.vue-->
<template>
  <button :class="{ 'active': isActive }" @click="selectPage">{{ page }}</button>
</template>

<script>
export default {
  name: 'Btn',
  props: {
    page: {
      type: Number,
      required: true
    }
  },
  computed: {
    isActive() {
      return this.page === this.current; // current是父组件传递的当前页码状态
    }
  },
  methods: {
    selectPage() {
      this.$emit('update:current', this.page); // 当点击按钮时，更新父组件的当前页码
    }
  }
};
</script>

<style>
.active {
  color: blue;
}
</style>

接下来，我们定义父组件`Product.vue`，它将包含分页逻辑，并将页码数据传递给`Btn.vue`组件。

<!--Product.vue-->
<template>
  <div>
    <!-- 分页按钮 -->
    <btn
      v-for="page in pageCount"
      :key="page"
      :page="page"
      :current="currentPage"
      @update:current="updateCurrentPage"
    ></btn>

    <!-- 这里可以放置其他内容，例如列表项等 -->
  </div>
</template>

<script>
import Btn from './Btn.vue';

export default {
  components: {
    Btn
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示的数据量
      // 其他数据，例如列表数据等
    };
  },
  computed: {
    pageCount() {
      // 假设有一个方法来计算总页数
      return Math.ceil(this.listData.length / this.pageSize);
    }
  },
  methods: {
    updateCurrentPage(newPage) {
      this.currentPage = newPage;
      // 在这里可以添加获取新页数据的逻辑
    }
  }
};
</script>

以上代码定义了两个组件，`Btn.vue`作为子组件显示单个页码按钮，而`Product.vue`作为父组件管理分页状态和逻辑。在`Product.vue`的模板中，我们通过`v-for`指令遍历所有页码，并将每个页码作为prop传递给`Btn.vue`。当用户点击某个页码按钮时，子组件会触发一个事件，父组件监听这个事件并更新当前页码。