小编点评

**应用范围** 一个项目可能包含多个页面，其中每个页面都可能使用 table 进行渲染。这些 table 的数据都是从后台请求数据进行渲染的，并且需要进行分页。 **使用方式** 可以创建一个通用组件 `FancyList`，并在需要时将其用于不同的页面。`FancyList` 可以通过作用域插槽封装，以提供通用功能。 **示例** ```html ``` **解释** * `FancyList` 是一个包含模板的组件。 * `:api-url` 和 `:per-page` 是作用域插槽属性，用于指定 API URL 和每页显示的数量。 * `template` 属性定义了显示单个 item 的模板。 * `#item` 是一个作用域插槽，它用于绑定子组件的 `item` 属性。

正文

1、应用范围

一个项目可能有多个页面用到了table，都是从后台请求数据进行渲染。分页。等通用功能。ui或许有些许不同，但是大部分都是重复的功能。所以看了官方文档，我们可以通过作用域插槽封装高级列表组件，一个组件通用所有项目。

2、使用方式

• 封装通用组件

<FancyList :api-url="url" :per-page="10">
  <template #item="{ body, username, likes }">
    <div class="item">
      <p>{{ body }}</p>
      <p>by {{ username }} | {{ likes }} likes</p>
    </div>
  </template>
</FancyList>

解释：api-url请求接口， per-page：一页显示数量。可根据需求添加不同参数

• FancyList组件

<ul>
  <li v-for="item in items">
    <slot name="item" v-bind="item"></slot>
  </li>
</ul>

解释：子组件传入插槽的 props 作为了 v-slot 指令的值，可以在插槽内的表达式中访问。你可以将作用域插槽类比为一个传入子组件的函数。子组件会将相应的 props 作为参数传给它

具体可参考官方文档插槽