如何使用 Vue 命名插槽建立多個模闆插槽？

作者：Matt Maribojoc

譯者：前端小智

來源：stackabuse

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

Vue 插槽允許将父元件中的内容注入到子元件中。

這是最基本的示例，如果我們不提供父級的任何

slot

内容，則我們将

<slot>

放在其中的任何内容都會作為後備内容。

// ChildComponent.vue
<template>
  <div>
     <slot> 後備内容 </slot>
  </div>
</template>

複制

你元件代碼：

// ParentComponent.vue
<template>
   <child-component>
      替換 slot 的預設内容
   </child-component>
</template>

複制

編譯後，我們的 DOM 将如下所示

<div> 替換 slot 的預設内容 </div>

複制

我們還可以将父組作用域内的任何資料寫在

slot

區域中。例如，父元件有一個名為

title

的資料字段，我們可以使用以下代碼将其注入到子元件中：

// ParentComponent.vue

<template>
   <child-component>
      {{ title }} 
   </child-component>
</template>

<script>
export default {
   data () {
     return {
       title: '這會傳遞給子元件',
     }
   }
}
</script>

複制

為什麼我們需要命名插槽

在Vue中使用命名插槽有兩個步驟：

使用 name 屬性從子元件中命名 slot
使用 v-slot 指令從父元件向這些命名插槽提供内容

預設情況下，不給插槽顯式的

name

屬性時，它有預設名字是

default

。

為了給我們的

slot

起個名字，

<slot>

元素具有一個特殊的

name

屬性，可以讓我們在多個插槽之間進行區分。

在下面的

 Article.vue

中，我們命名三個

slot

// Article.vue - Child Component
<template>
  <div>
    <slot name="title"> 預設 title </slot>
    <slot name="content"> 預設 content </slot>
    <slot name="comments"> 預設 comments</slot>
  </div>
</template>

複制

然後，在父元件中，我們可以在

<template>

元素上使用

v-slot

指令指定我們想要注入内容的

slot

。

// ParentComponent.vue
<template>
  <div>
    <child-component>
      <template> 我的 Title </template>
      <template> 我的 Content </template>
      <template> 我的 Comments </template>
    </child-component>
  </div>
</template>

複制

因為這是沒有指定 slot 的名稱，是以顯示的是 slot 預設的内容。

要解決這個問題，可以使用

v-slot

，指定的名稱要確定名稱與我們在子元件中聲明的名稱完全比對。

<template>
  <div>
    <child-component>
      <template v-slot:title> 我的 title </template>
      <template v-slot:content> 我的 content </template>
      <template v-slot:comments> 我的 comments </template>
    </child-component>
  </div>
</template>

複制

再次運作：

使用 Vue 命名插槽有什麼意義

命名槽讓我們可以使用多個槽，但是為什麼這對我們Vue開發人員有用呢。

簡而言之，它使我們可以更好地組織開發代碼，還可以編寫更具擴充性的代碼。

就個人而言，我認為最重要的是，它允許我們在代碼上使用插槽，進而使樣式設計變得更加容易。在我們的示例中，

Article.vue

子元件隻有三個插槽，但是在實際應用中，這些插槽看起來更像這樣，以便我們的元件可以向每個部分添加CSS樣式。

<template>
  <div>
    <div class="title">
      <h1>
        <slot name="title"> 預設 Title </slot>
      </h1>
    </div>
    <div class="content">
      <p>
        <slot name="content"> 預設  Content </slot>
      </p>
    </div>
    <div class="comments">
      <slot name="comments"> 預設  Comments </slot>
    </div>
  </div>
</template>

複制

在此示例中，更容易了解為什麼我們需要多個

slot

。由于我們注入的内容是通過不同的

<div>

，

<p>

和DOM元素彼此分隔的。無法在一個

slot

中傳遞所有這些資訊。

如果檢查DOM，可以看到使用

v-slot

的模闆将内容正确地插入到正确的位置。

~完，我是刷碗智，去刷碗了，下期見！

代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：

https://learn.co/2021/04/usin...

交流

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。