Vue 插槽之插槽內容學習總結

授客發表於2021-03-13
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#插槽內容

相關文章