面试题：Vue插槽在多组件复用布局中的应用案例分析

实现思路：
- 创建一个包含顶部导航和底部版权信息的基础布局组件。
- 在基础布局组件中使用插槽，以便在不同页面（商品列表、商品详情、促销活动页面等）中插入各自的内容部分。
具体实现步骤：
- 步骤一：创建基础布局组件
  - 在Vue项目中，创建一个名为BaseLayout.vue的组件。
- 步骤二：定义插槽
  - 在BaseLayout.vue组件模板中，定义插槽位置，将顶部导航和底部版权信息固定，中间部分用插槽占位。
- 步骤三：在不同页面使用基础布局组件
  - 在商品列表、商品详情、促销活动页面等组件中引入BaseLayout.vue组件，并在其中填充插槽内容。
代码示例：
- BaseLayout.vue

<template>
  <div>
    <!-- 顶部导航 -->
    <header>
      <h1>电商平台顶部导航</h1>
    </header>
    <!-- 插槽，用于插入页面具体内容 -->
    <slot></slot>
    <!-- 底部版权信息 -->
    <footer>
      <p>版权所有 &copy; 2024 电商公司</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'BaseLayout'
}
</script>

<style scoped>
header {
  background-color: #f0f0f0;
  padding: 10px;
}
footer {
  background-color: #e0e0e0;
  padding: 10px;
  text-align: center;
}
</style>

商品列表页面组件（GoodsList.vue示例）

<template>
  <BaseLayout>
    <h2>商品列表页面内容</h2>
    <ul>
      <li>商品1</li>
      <li>商品2</li>
    </ul>
  </BaseLayout>
</template>

<script>
import BaseLayout from '@/components/BaseLayout.vue'
export default {
  name: 'GoodsList',
  components: {
    BaseLayout
  }
}
</script>

<style scoped>
ul {
  list - style - type: none;
  padding: 0;
}
</style>

商品详情页面组件（GoodsDetail.vue示例）

<template>
  <BaseLayout>
    <h2>商品详情页面内容</h2>
    <p>这是商品详情描述...</p>
  </BaseLayout>
</template>

<script>
import BaseLayout from '@/components/BaseLayout.vue'
export default {
  name: 'GoodsDetail',
  components: {
    BaseLayout
  }
}
</script>

<style scoped>

</style>

促销活动页面组件（Promotion.vue示例）

<template>
  <BaseLayout>
    <h2>促销活动页面内容</h2>
    <p>这里展示促销活动信息...</p>
  </BaseLayout>
</template>

<script>
import BaseLayout from '@/components/BaseLayout.vue'
export default {
  name: 'Promotion',
  components: {
    BaseLayout
  }
}
</script>

<style scoped>

</style>

星途面试题库

面试题：Vue插槽在多组件复用布局中的应用案例分析

知识考点

面试题答案