slot多层传递

在写组件库的时候，我们会需要用到多层slot的情况，如：

• 组件Panel，定义了header、body、footer等插槽，且给予了一些基础的样式，head、body、foot等通过slot传出，让父组件定义。
• 组件Dialog，使用了组件Panel，定制了head（给右上角增加了关闭按钮）和foot（放置按钮），并且增加了如关闭、确定等逻辑，但是仍然将body通过slot传出，让父组件定义。

这种情况该如何将源自Panel的body slot传递到最外层？答案如下：

<!--Panel.vue-->
<div>
  <div class="head">
  	<slot name="head"></slot>
  </div>
  <div class="body">
  	<slot name="body"></slot>
  </div>
  <div class="foot">
  	<slot name="foot"></slot>
  </div>
</div>

<!--Dialog.vue-->
<Panel>
  <div slot="head">
    {{title}}
    <button>关闭</button>
  </div>
  <div slot="body">
    <!--只要在这里再定义一个slot即可-->
  	<slot name="body"></slot>
  </div>
  <div slot="foot">
    <button>确定</button>
    <button>取消</button>
  </div>
</div>

<!--App.vue-->
<Dialog>
	<div slot="body">
    这里是body
  </div>
</Dialog>

没错，只要在Dialog.vue的<div slot="body">中再定义一个slot即可。