Vue具名插槽的用法（附带实例）

插槽是指 HTML 起始标签与结束标签中间的部分，通常在使用 div 标签时，其内部的插槽位置既可以放置要显示的文案，又可以嵌套放置其他标签。例如：

<div>文案部分</div>
<div>
  <button>按钮</button>
</div>

插槽的核心作用是将组件内部的元素抽离给外部进行实现，在进行自定义组件的设计时，良好的插槽逻辑可以使组件的使用更加灵活。

具名插槽是指为插槽设置一个具体的名称，在使用组件时，可以通过插槽的名称来设置插槽的内容。由于具名插槽可以非常明确地指定插槽内容的位置，因此当一个组件要支持多个插槽时，通常需要使用具名插槽。

例如，我们要编写一个容器组件，此组件由头部元素、主元素和尾部元素组成，此组件就需要有 3 个插槽。具名插槽的用法示例如下：

<div id="Application">
  <my-container2>
    <template #header>
      <h1>这里是头部元素</h1>
    </template>

    <template #main>
      <p>内容部分</p>
      <p>内容部分</p>
    </template>

    <template #footer>
      <p>这里是尾部元素</p>
    </template>
  </my-container2>
</div>

<script>
  const { createApp } = Vue;
  const App = createApp({});
  const container2Component = {
    template: `
      <div>
        <slot name="header"></slot>
        <hr/>
        <slot name="main"></slot>
        <hr/>
        <slot name="footer"></slot>
      </div>
    `
  };
  App.component("my-container2", container2Component);

  const containerComponent = {
    template: `
      <div style="border-style:solid;border-color:red;border-width:10px">
        <slot>插槽的默认内容</slot>
      </div>
    `
  };
  App.component("my-container", containerComponent);
  App.mount("#Application");
</script>

如以上代码所示，在组件内部定义 slot 插槽时，可以使用 name 属性来为其设置具体的名称。

需要注意的是，在使用此组件时，要使用 template 标签来包装插槽内容，对于 template 标签，通过 v-slot 来指定与其对应的插槽位置。页面渲染效果如下图所示：


在 Vue 中，很多指令都有缩写形式，具名插槽同样也有缩写形式，可以使用符号 # 来代替“v-slot:”。上面的示例代码修改为如下形式依然可以正常运行：

<my-container2>
  <template #header>
    <h1>这里是头部元素</h1>
  </template>

  <template #main>
    <p>内容部分</p>
    <p>内容部分</p>
  </template>

  <template #footer>
    <p>这里是尾部元素</p>
  </template>
</my-container2>