多层slot

有时候我们对三方UI组件进行二次封装的时候，会遇到这样一个问题：只是定制一些props或加一些部件，但是该组件的slot仍然要暴露给外部。这就涉及到多层slot的问题。

假设有一个三方组件APanel，其提供名为head、body、foot等slot，现在我们想将head、foot等进行定制，形成EhancedAPanel，但将body暴露给外部，可以这样写：

<template>
  <APanel>
    <div slot="head">定制标题</div>
      <div slot="body">
  	<slot name="body"/>
      </div>
    <div slot="foot">定制脚体</div>
  </APanel>
</template>

没错，只要再写一个slot传出去就行了。

如果body里带了一点数据，比如名为data，则可以这样：

<template>
  <APanel>
    <div slot="head">定制标题</div>
      <div slot="body" slot-scope="{data}">
  	<slot name="body" :data="data"/>
      </div>
    <div slot="foot">定制脚体</div>
  </APanel>
</template>

最后这样使用EhancedAPanel：

<template>
  <EhancedAPanel>
    <div slot="body" slot-scope="{data}">
      {{data}}
    </div>
  </EhancedAPanel>
</template>

标签：slot,body,多层,EhancedAPanel,组件,定制,脚体
来源： https://www.cnblogs.com/hdxg/p/16299738.html