Vue 中如何使用具名插槽 (Named Slots)？

推荐答案

在 Vue 中，具名插槽（Named Slots）允许你在组件中定义多个插槽，并通过名称来区分它们。使用具名插槽的基本步骤如下：

1. 在子组件中定义具名插槽： 使用 <slot> 标签，并通过 name 属性为插槽命名。

   // www.javascriptcn.com code example
   <template>
     <div>
       <header>
         <slot name="header"></slot>
       </header>
       <main>
         <slot></slot> <!-- 默认插槽 -->
       </main>
       <footer>
         <slot name="footer"></slot>
       </footer>
     </div>
   </template>

2. 在父组件中使用具名插槽： 使用 <template> 标签，并通过 v-slot 指令指定插槽名称。

   // www.javascriptcn.com code example
   <template>
     <ChildComponent>
       <template v-slot:header>
         <h1>这是头部内容</h1>
       </template>
       <p>这是默认插槽的内容</p>
       <template v-slot:footer>
         <p>这是底部内容</p>
       </template>
     </ChildComponent>
   </template>

本题详细解读

1. 具名插槽的作用

具名插槽允许你在一个组件中定义多个插槽，每个插槽可以有不同的名称。这样，父组件可以根据需要将内容插入到子组件的不同位置。

2. 具名插槽的语法

• 子组件：使用 <slot> 标签，并通过 name 属性为插槽命名。未命名的插槽是默认插槽。
• 父组件：使用 <template> 标签，并通过 v-slot 指令指定插槽名称。未指定名称的内容会插入到默认插槽中。

3. 具名插槽的简写

在 Vue 2.6.0 及以上版本中，v-slot 指令可以简写为 #。

// www.javascriptcn.com code example
<template>
  <ChildComponent>
    <template #header>
      <h1>这是头部内容</h1>
    </template>
    <p>这是默认插槽的内容</p>
    <template #footer>
      <p>这是底部内容</p>
    </template>
  </ChildComponent>
</template>

4. 具名插槽的作用域

具名插槽可以访问子组件中的数据，通过 v-slot 指令的语法可以传递作用域插槽的数据。

<template>
  <ChildComponent>
    <template v-slot:header="slotProps">
      <h1>{{ slotProps.title }}</h1>
    </template>
  </ChildComponent>
</template>

在子组件中：

// www.javascriptcn.com code example
<template>
  <div>
    <header>
      <slot name="header" :title="headerTitle"></slot>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerTitle: '这是头部标题'
    };
  }
};
</script>

5. 具名插槽的默认内容

你可以在子组件中为具名插槽提供默认内容，当父组件没有提供内容时，默认内容会显示。

<template>
  <div>
    <header>
      <slot name="header">默认头部内容</slot>
    </header>
  </div>
</template>

6. 具名插槽的注意事项

• 具名插槽的名称是唯一的，不能重复。
• 默认插槽不需要指定名称，父组件中未指定插槽名称的内容会自动插入到默认插槽中。
• 具名插槽可以嵌套使用，但要注意作用域的问题。