女人书籍排行榜,怎样写网络小说

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

何時何地使用Vue的作用域插槽

Vue插槽是一種將內(nèi)容從父組件注入子組件的絕佳方法。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供渝水企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為渝水眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。

下面是一個基本的示例，如果我們不提供父級的任何slot位的內(nèi)容，剛父級中的內(nèi)容就會作為后備內(nèi)容。

 
 
 
 
  
  
  
  // ChildComponent.vue

然后在我們的父組件中:

 
 
 
 
  
  
  
  // ParentComponent.vue

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

 
 
 
 
  
  
  
   Override fallback content

我們還可以將來自父級作用域的任何數(shù)據(jù)包在在 slot 內(nèi)容中。因此，如果我們的組件有一個名為name的數(shù)據(jù)字段，我們可以像這樣輕松地添加它。

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

我們來看另一個例子，假設(shè)我們有一個ArticleHeader組件，data 中包含了一些文章信息。

 
 
 
 
  
  
  
  // ArticleHeader.vue

我們細看一下 slot 內(nèi)容，后備內(nèi)容渲染了 info.title。

在不更改默認后備內(nèi)容的情況下，我們可以像這樣輕松實現(xiàn)此組件。

 
 
 
 
  
  
  
  // ParentComponent.vue

在瀏覽器中，會顯示 title。

雖然我們可以通過向槽中添加模板表達式來快速地更改槽中的內(nèi)容，但如果我們想從子組件中渲染info.description，會發(fā)生什么呢?

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

 
 
 
 
  
  
  
  // Doesn't work!

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

這是因為我們的父組件不知道這個info對象是什么。

那么我們該如何解決呢？

引入作用域插槽

簡而言之，作用域內(nèi)的插槽允許我們父組件中的插槽內(nèi)容訪問僅在子組件中找到的數(shù)據(jù)。例如，我們可以使用作用域限定的插槽來授予父組件訪問info的權(quán)限。

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

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

 
 
 
 
  
  
  
  // ArticleHeader.vue

然后，在我們的父組件中，我們可以使用

現(xiàn)在，我們所有的slot props,（在我們的示例中，僅是 info）將作為article對象的屬性提供，并且我們可以輕松地更改我們的slot以顯示description內(nèi)容。

 
 
 
 
  
  
  
  // ParentComponent.vue

最終的效果如下：

總結(jié)

盡管Vue 作用域插槽是一個非常簡單的概念-讓插槽內(nèi)容可以訪問子組件數(shù)據(jù)，這在設(shè)計出色的組件方面很有用處。通過將數(shù)據(jù)保留在一個位置并將其綁定到其他位置，管理不同狀態(tài)變得更加清晰。

~完，我是刷碗智，我要去刷碗了，骨得白

作者：Ashish Lahoti 譯者：前端小智來源：codingnconcept

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

當前文章：何時何地使用Vue的作用域插槽
URL標題：http://m.fisionsoft.com.cn/article/coejjhc.html