面试题：Vue具名插槽在项目中如何实现不同区域内容的插入

Question

假设你正在开发一个页面布局，有页眉（header）、主体（main）、页脚（footer）三个部分，每个部分内容可能来自不同的组件，需要使用具名插槽来实现。请描述具体的实现步骤，并给出一个简单的代码示例（包括父组件和子组件代码）。

Answer 1

实现步骤

1. 在子组件中定义具名插槽，用来接收不同部分的内容。
2. 在父组件中，通过<template>标签并指定v-slot指令，将不同的内容对应到子组件的具名插槽中。

代码示例

子组件（PageLayout.vue）

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件（App.vue）

<template>
  <div id="app">
    <PageLayout>
      <template v-slot:header>
        <h1>这是页眉</h1>
      </template>
      <p>这是主体内容</p>
      <template v-slot:footer>
        <p>这是页脚</p>
      </template>
    </PageLayout>
  </div>
</template>

<script>
import PageLayout from './components/PageLayout.vue';

export default {
  name: 'App',
  components: {
    PageLayout
  }
};
</script>