Use slots in an Slot's Fallback Content
What problem does this feature solve?
I use this to simplify render scope declaration. 我希望用这个特性简化scope的书写方式。
For example, in current version, I have to write like this: 例如,当前版本我必须这样写:
Component 1: this is an Generalized Loaded Data Provider 组件1:这是个一般化的用来提供加载数据的提供器
<template>
<data-loader :load-data="loadData" #default="{data}">
<slot :data="data"/>
</data-loader>
</template>
Component 2: this is an Business Specific Data Provider based on Component 1: 组件2:这是个业务特定的数据提供器,基于组件1
<template>
<component-1 :load-data="getUsers" #default="{data}">
// NOTICE: the following code line will have to unnessesarily repeat again and again if there are many different business provider components
// 注意下面这行代码,如果需要写很多不同的业务数据加载提供器,就需要不必要地重复写无数遍
<slot :data="data"/>
</component-1>
</template>
Finally, I need to use Component 2 in pages: 最后,我的目的是在页面中使用组件2:
<template>
<component-2 #default="{data}">
{{data}}
</component-2>
</template>
What does the proposed API look like?
Component 1: this is an Generalized Loaded Data Provider 组件1:这是个一般化的用来提供加载数据的提供器
<template>
<data-loader :load-data="loadData" #default="{data}">
<slot :data="data">
<slot :data="data"/>
</slot>
</data-loader>
</template>
Component 2: this is an Business Specific Data Provider based on Component 1: 组件2:这是个业务特定的数据提供器,基于组件1
<template>
<component-1 :load-data="getUsers"/>
</template>
Finally, I need to use Component 2 in pages: 最后,我的目的是在页面中使用组件2:
<template>
<component-2 #default="{data}">
{{data}}
</component-2>
</template>