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

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

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

<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>
  <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>

<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>