用模板填写插槽

上一章把确定做成内容里的按钮：

<template>
  <p>Hello World</p>
  <button @click="emit('ok')">OK</button>
</template>

实际项目里，确定按钮常常希望出现在容器的 footer。

但内容组件里并没有 ElDialog，没法像平时那样写：

<ElDialog>
  <template #footer>…</template>
</ElDialog>

LayerTemplate 就是用仍然熟悉的模板语法，把一块内容投到目标组件的同名插槽里。

在内容里填容器的 footer

把按钮用 LayerTemplate 包起来，投到容器的 footer：

<template>
  <p>Hello World</p>
  <LayerTemplate :to="layer" name="footer">
    <button @click="emit('ok')">OK</button>
  </LayerTemplate>
</template>

layer 是 defineLayer() 的返回值。这块内容不会留在正文里，只会出现在容器的 footer。

加载示例中…

调用方也可以往内容里塞插槽

调用方若要往内容的具名插槽里塞东西，页面上通常也没有直接写内容组件，没法用普通的 #header：

<HelloWorld>
  <template #header>…</template>
</HelloWorld>

同样用 LayerTemplate，:to 换成实例：

<LayerTemplate :to="dialog" name="header">
  <span>自定义头部</span>
</LayerTemplate>

内容里需要有 <slot name="header" />。若要改容器插槽（例如盖掉内容写的 footer），加 container 即可，见 配置如何合并。

下一步

基础用法到这里可以告一段落。

• 页内复用、visible-outside：见 复用内容组件
• Props、插槽优先级，以及挂卸载 / 改 name 时的注册细节：见 API：LayerTemplate
• 设计决策：见 设计决策
• 谁覆盖谁：见 配置如何合并