Subscribe on changes!

Use slots in an Slot's Fallback Content

avatar
Nov 1st 2021

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>
avatar
Nov 2nd 2021

You can provide multiple slots and nest them inside of the component receiving them to allow this:

<template>
  <slot name="container">
    <div class="container">
      <slot name="inner" />
    </div>
  </slot>
</template

If you want to propose a new syntax, please use the RFC process in the rfcs repo.