通过作用域插槽封装高级列表组件

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 作为参数传给它

具体可参考官方文档插槽