Vue 插槽之插槽内容学习总结

插槽内容使用方法介绍

父组件中引用支持插槽内容的子组件，形如以下(假设子组件为NavigationLink.vue)

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后在子组件<template> 模板中使用<slot></slot>,形如以下：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

这样以后，当组件渲染的时候，子组件中的<slot></slot> 将会被替换为父组件模板中，子组件起始标签和结束标签之间的内容--这里称之为“插槽内容”。

插槽内可以包含任何模板代码，包括 HTML：

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

甚至其它的组件：

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

如果子组件 template 中没有包含一个 <slot> 元素，则父组件中，该组件起始标签和结束标签之间的任何内容都会被抛弃

应用举例

需求描述

自定义卡片组件，用于展示不同的内容，形式为 显示卡片标题和内容，卡片和卡片之间看起来需要有“分界条”

Testpage.vue

<template>
  <div class="page-main">
    <div class="main-content">
      <card class="authors-single" title="测试标签1">
        <div style="height:50px;width:60px">hello</div>
      </card>
      <card class="authors-single" title="测试标签2">
          <div>卡片内容</div>
      </card>
    </div>
  </div>
</template>

<script>
import Card from "@/components/Card";

export default {
  components: { Card },
};
</script>

<style scoped lang="scss">
.page-main {
  height: calc(100vh - 129px);
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  .main-content {
    overflow: auto;
    flex: auto;
  }
}
</style>

Card.vue

组件路径位于@/components/Card/Card.vue

<template>
  <div class="card">
    <div class="card-title">{{title}}</div>
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  padding: 2px 5px;

  &-title {
    flex: none;
    padding: 0.4em 8px;
    font-size: 17px;
    position: relative;
    background-color: #f8f8f8;

    &::before {
      content: "";
      width: 4px;
      height: 100%;
      background: #59bcc7;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  &-content {
    flex: auto;
    padding: 10px;
    margin-top: 10px;
    background-color: #f8f8f8;
  }
}
</style>

效果

参考连接

https://cn.vuejs.org/v2/guide/components-slots.html#插槽内容