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 作为参数传给它
具体可参考官方文档插槽