為什麼要使用vue的作用域插槽？什麼時候使用？

本篇文章帶大家詳細了解vue的作用域插槽。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

Vue插槽是將內容從父元件注入子元件的絕佳方法。 （學習影片分享：vue影片教學）

以下是一個基本的範例，如果我們不提供父級的任何slot位元的內容，剛父級<slot></slot>中的內容就會作為後備內​​容。

// ChildComponent.vue
<template>
  <div>
     <slot> Fallback Content </slot>
  </div>
</template>

然後在我們的父元件中:

// ParentComponent.vue
<template>
   <child-component>
      Override fallback content
   </child-component>
</template>

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

<div> Override fallback content </div>

我們也可以將任何來自父級作用域的資料包在 slot 內容中。因此，如果我們的元件有一個名為name的資料字段，我們可以像這樣輕鬆地添加它。

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

<script>
export default {
   data () {
     return {
       text: &#39;hello world&#39;,
     }
   }
}
</script>

【相關推薦：vue.js教學】

為什麼我們需要作用域插槽

我們來看另一個例子，假設我們有一個ArticleHeader元件，data 中包含了一些文章資訊。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: &#39;title&#39;,
        description: &#39;description&#39;,
      },
    }
  },
}
</script>

我們細看一下 slot 內容，後備內容渲染了 info.title。

在不更改預設後備內容的情況下，我們可以像這樣輕鬆實現此元件。

// ParentComponent.vue
<template>
  <div>
    <article-header />
  </div>
</template>

在瀏覽器中，會顯示 title。

雖然我們可以透過在槽中新增模板表達式來快速地更改槽中的內容，但如果我們想從子元件中渲染info.description，會發生什麼事呢?

我們想像用下面的這種方式來做：

// Doesn't work!
<template>
  <div>
    <article-header>
        {{ info.description }}
    </article-header>
  </div>
</template>

但是，這樣運行後會報錯： TypeError: Cannot read property 'description' of undefined。

這是因為我們的父元件不知道這個info物件是什麼。

那我們該如何解決呢？

引入作用域插槽

簡而言之，作用域內的插槽允許我們父元件中的插槽內容存取僅在子元件中找到的資料。 例如，我們可以使用作用域限定的插槽來授予父元件存取info的權限。

我們需要兩個步驟來做到這一點：

• 使用v-bind讓slot內容可以使用 info
• 在父級作用域中使用v-slot存取slot屬性

##首先，為了讓

info對父物件可用，我們可以將info物件綁定為插槽上的一個屬性。這些有界屬性稱為slot props。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

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

現在，我們所有的slot props,（在我們的範例中，僅是

info）將作為article物件的屬性提供，並且我們可以輕鬆地更改我們的slot以顯示description內容。

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
        {{ article.info.description }}
      </template>
    </child-component>
  </div>
</template>

最終的效果如下：

#總結

儘管Vue 作用域插槽是一個非常簡單的概念-讓插槽內容可以存取子組件數據，這在設計出色的組件方面很有用處。透過將資料保留在一個位置並將其綁定到其他位置，管理不同狀態變得更加清晰。

原文網址：https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/

作者：Ashish Lahoti

譯文網址：https://segmentfault.com/a/1190000039801512

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是為什麼要使用vue的作用域插槽？什麼時候使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！