Vue2.0开发之——插槽-具名插槽(59)

发表于 2023-03-23 分类于开发， C-前端开发， Vue2 阅读时长 ≈ 1 分钟

一概述

如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的 name 名称。
这种带有具体名称的插槽叫做"具名插槽"

Slots说明

名称	说明
title	自定义标题
left	自定义左侧区域内容
right	自定义右侧区域内容

三具名插槽示例—文章(标题/内容/署名)

3.1 Article.vue中定义插槽(标题/内容/署名)

<template>
  <div class="article-container">
    <h3 v-color="'red'">Article 组件</h3>
    <!-- 文章的标题 -->
    <div class="header-box">
      <slot name="title"></slot>
    </div>

    <!-- 文章的内容 -->
    <div class="content-box">
      <slot name="content"></slot>
    </div>

    <!-- 文章的作者 -->
    <div class="footer-box">
      <slot name="author"></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 首字母要大写
  name: 'Article',

}
</script>

<style lang="less" scoped>
.article-container {
  > div {
    min-height: 150px;
  }
  .header-box {
    background-color: pink;
  }
  .content-box {
    background-color: lightblue;
  }
  .footer-box {
    background-color: lightsalmon;
  }
}
</style>

3.2 App.vue使用插槽

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <Article>
      <template #title>
        <h1>滕王阁序</h1>
      </template>

      <template #content>
        <p>豫章故郡，洪都信服</p>
        <p>星分翼轸，地接衡庐</p>
        <p>襟三江而带五湖，控蛮荆而引瓯越</p>
      </template>

      <template #author>
        <p>作者：王勃</p>
      </template>
    </Article>

  </div>
</template>

3.3 效果图

四参考

Vant 4

0%