国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入理解vue中的slot與slot-scope

wayneli / 3309人閱讀

摘要：具名插槽可以在一個組件中出現(xiàn)次。出現(xiàn)在不同的位置。這個稍微難理解一點。使用非常方便，是基于搭建工程。地址點這里最后如果本文對你理解和有幫助，請不要吝嗇手中的點贊喲。

作者/云荒杯傾

寫在前面

vue中關(guān)于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生“算了吧，回頭再學(xué)，反正已經(jīng)可以寫基礎(chǔ)組件了”，于是就關(guān)閉了vue說明文檔。

實際上，插槽的概念很簡單，下面通過分三部分來講。這個部分也是按照vue說明文檔的順序來寫的。

進入三部分之前，先讓還沒接觸過插槽的同學(xué)對什么是插槽有一個簡單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上，一個slot最核心的兩個問題這里就點出來了，是顯示不顯示和怎樣顯示。

由于插槽是一塊模板，所以，對于任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個空殼子，因為它顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板將來就顯示在哪塊。

單個插槽 | 默認插槽 | 匿名插槽

首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它默認插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設(shè)置name屬性。

單個插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個組件中只能有一個該類插槽。相對應(yīng)的，具名插槽就可以有很多個，只要名字（name屬性）不同就可以了。

下面通過一個例子來展示。

父組件：

子組件：

在這個例子里，因為父組件在里面寫了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。


  菜單1
  菜單2
  菜單3
  菜單4
  菜單5
  菜單6

最終的渲染結(jié)果如圖所示：

注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍色填充。
具名插槽

匿名插槽沒有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個組件中出現(xiàn)N次。出現(xiàn)在不同的位置。下面的例子，就是一個有兩個具名插槽和單個插槽的組件，這三個插槽被父組件用同一套css樣式顯示了出來，不同的是內(nèi)容上略有區(qū)別。

父組件：

子組件：

顯示結(jié)果如圖：

可以看到，父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽。沒有slot屬性的html模板默認關(guān)聯(lián)匿名插槽。

作用域插槽 | 帶數(shù)據(jù)的插槽

最后，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫

匿名插槽

具名插槽

但是作用域插槽要求，在slot上面綁定數(shù)據(jù)。也就是你得寫成大概下面這個樣子。


 export default {
    data: function(){
      return {
        data: ["zhangsan","lisi","wanwu","zhaoliu","tianqi","xiaoba"]
      }
    },
}

我們前面說了，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板，像下面那樣。


   html模板

寫了，插槽就總得在瀏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。
OK，我們說有html模板的情況，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內(nèi)容呢？

正因為作用域插槽綁定了一套數(shù)據(jù)，父組件可以拿來用。于是，情況就變成了這樣：樣式父組件說了算，但內(nèi)容可以顯示子組件插槽綁定的。

我們再來對比，作用域插槽和單個插槽和具名插槽的區(qū)別，因為單個插槽和具名插槽不綁定數(shù)據(jù)，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容；而作用域插槽，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數(shù)據(jù)的前提下）。

下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供數(shù)據(jù)，數(shù)據(jù)使用的都是子組件插槽自己綁定的那個人名數(shù)組。

父組件：

子組件：



 export default {
    data: function(){
      return {
        data: ["zhangsan","lisi","wanwu","zhaoliu","tianqi","xiaoba"]
      }
    }
}

結(jié)果如圖所示：

github

以上三個demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。

地址點這里

最后

如果本文對你理解slot和scope-slot有幫助，請不要吝嗇手中的點贊喲。
編程貴在實踐，趕緊行動起來吧！

關(guān)于作者

技術(shù)博客 || GitHub || 掘金主頁

轉(zhuǎn)載請注明鏈接。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92796.html

相關(guān)文章

  • Vue的slot-scope的場景的個人理解

    摘要：網(wǎng)絡(luò)上大多數(shù)文章，也是千篇一律的翻譯這句話，可是僅憑這一句話，我想象不到的使用場景。因為真正的使用場景下，子組件的數(shù)據(jù)都是來自父組件的。組件的數(shù)據(jù)都是來自調(diào)用者的，然后會把每一行的，在開發(fā)者需要時，傳遞出去。 Vue的slot-scope的場景的個人理解 這篇文章不是單純把文檔的話和api拿來翻譯和演示，而是談?wù)勎覍τ趕lot-scope的使用場景的個人理解，如果理解錯誤，歡迎討論！ ...

    Forest10 評論0 收藏0

  • vue 插槽，`slot`和 `slot-scope`已被廢棄

    摘要：它取代了和這兩個目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當被提供的內(nèi)容只有默認插槽時，組件的標簽才可以被當作插槽的模板來使用。如下，讓后備內(nèi)容默認內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope，然后看了一下文檔的更新，于是又重新把插槽學(xué)習(xí)了一篇，下面一段是文檔中的說明: 在 2.6.0 中...

    myshell 評論0 收藏0

  • vue 插槽，`slot`和 `slot-scope`已被廢棄

    摘要：它取代了和這兩個目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當被提供的內(nèi)容只有默認插槽時，組件的標簽才可以被當作插槽的模板來使用。如下，讓后備內(nèi)容默認內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope，然后看了一下文檔的更新，于是又重新把插槽學(xué)習(xí)了一篇，下面一段是文檔中的說明: 在 2.6.0 中...

    thursday 評論0 收藏0

  • 組件(4)：使用slot進行內(nèi)容分發(fā)

    摘要：綁定到子組件屬性綁定到父組件屬性在子組件模板內(nèi)將指令綁定到子組件屬性列表第一項，由于父組件找不到屬性，將不會顯示。哪都通快遞龍虎山天師府曜星社內(nèi)容分發(fā)中的被插入中，并且因為中的指令而進行迭代，迭代之后通過獲取上的屬性數(shù)據(jù)。 組件的作用域(一) 父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。 父子組件的編譯相互獨立，編譯時只能使用各自作用域中的屬性和方法，例...

    YanceyOfficial 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<