資訊專欄INFORMATION COLUMN
摘要：網(wǎng)絡(luò)上大多數(shù)文章，也是千篇一律的翻譯這句話，可是僅憑這一句話，我想象不到的使用場景。因為真正的使用場景下，子組件的數(shù)據(jù)都是來自父組件的。組件的數(shù)據(jù)都是來自調(diào)用者的，然后會把每一行的，在開發(fā)者需要時，傳遞出去。
Vue的slot-scope的場景的個人理解
這篇文章不是單純把文檔的話和api拿來翻譯和演示，而是談?wù)勎覍τ趕lot-scope的使用場景的個人理解，如果理解錯誤，歡迎討論！
Vue的插槽slot，分為3種
匿名插槽
具名插槽
作用域插槽
前兩種很好理解，無論就是子組件里定義一個slot占位符，父組件調(diào)用時，在slot對應(yīng)的位置填充模板就好了。
作用域插槽的慨念，文檔卻只有一句簡單的描述
有的時候你希望提供的組件帶有一個可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽。
網(wǎng)絡(luò)上大多數(shù)文章，也是千篇一律的翻譯這句話，可是僅憑這一句話，我想象不到slot-scope的使用場景。
前言介紹了寫這篇文章的來由，接下來簡述一下本文的脈絡(luò)
首先，我會結(jié)合文檔上todo-list的例子，來簡單說明一下slot-scope的使用方式
其次，會使用但不理解什么時候用，就沒有什么意義，所以本文第二部分，談一下個人對于其使用場景的理解
最后，是我翻閱網(wǎng)絡(luò)上關(guān)于slot-scope時，看到的一些我覺得不太恰當(dāng)?shù)陌咐?/p> 官方文檔slot-scope的示例
下面是2個父子的vue組件，先解釋一下2個組件做了什么事情
父組件僅僅是調(diào)用了子組件
子組件內(nèi)部實現(xiàn)了一個todolist列表
我建議從數(shù)據(jù)流動的角度，理解插槽作用域的使用方式，（先學(xué)會怎么用，暫時不用理解為什么要這么用,使用場景是第二部分）
1.父組件傳遞了todos數(shù)組給子組件
2.子組件通過props接受了數(shù)組數(shù)據(jù)，這里應(yīng)該沒有任何問題
3.子組件拿到數(shù)組后v-for渲染列表，并且通過
4.父組件通過slot-scope="slotProps"的方式，接受todo對象，之后就可以通過slotProps.todo.xxx的方式來使用了
所以數(shù)據(jù)的流動經(jīng)歷了
父組件傳遞todos數(shù)組給子組件
子組件遍歷todos數(shù)組，把里面的todo對象傳遞給父組件
好啦，這就是slot-scope的使用方法，就這么簡單，完結(jié)撒花~
我貼出全部代碼，方便大家自己研究
父組件的源碼，也就是調(diào)用者
? {{slotProps.todo.text}}
子組件源碼，也就是封裝組件的人
slot-scope的使用場景的個人理解
想象一個場景：
當(dāng)你要給同事封裝一個列表組件，你就需要使用作用域插槽（注意是列表或者類似列表的組件）
你開發(fā)的這個列表組件要如何使用呢？
一般來說作為列表組件的調(diào)用者，你的同事先做ajax請求，拿到一個這樣的數(shù)組
todos: [
{
id: 0,
text: "ziwei0",
isComplete: false
},
{
text: "ziwei1",
id: 1,
isComplete: true
},
{
text: "ziwei2",
id: 2,
isComplete: false
},
{
text: "ziwei3",
id: 3,
isComplete: false
}
]
之后會把todso傳遞給列表組件吧，那么列表組件內(nèi)部做什么事情呢？
列表內(nèi)部肯定會v-for去幫你的同事渲染這個數(shù)組嘛。 就類似element-ui里的table組件一樣
問題的關(guān)鍵就在這里
列表組件的循環(huán)，是發(fā)生在組件內(nèi)部的，所以通過 v-for="todo in todos" ,列表組件很容易拿到每一項todo，但列表拿到數(shù)據(jù)沒用呀，列表只是一個瓜皮，它又不懂業(yè)務(wù)邏輯
這個數(shù)據(jù)是你同事的業(yè)務(wù)數(shù)據(jù)，所以這個數(shù)據(jù)必須得交給組件的調(diào)用者，也就是把數(shù)據(jù)交給你的同事才對。
那么你怎樣才能把每一項的todo數(shù)據(jù)給傳遞出去呢？
你會發(fā)現(xiàn)沒有辦法！
無論是用$emit、vuex還是localStorage，可以考慮一下，會發(fā)現(xiàn)沒有合適的時機，能讓你把todo傳遞出去
所以為了應(yīng)對這個場景下，發(fā)明了作用域插槽，列表組件可以通過
你的同事可以通過 slot-scope="slotsProps"拿到todo。
回答幾個疑問，其實如果你看懂上面的問題，應(yīng)該可以回答下面的問題。這也是我曾經(jīng)的疑問
疑問1：一般不是我們傳參數(shù)來調(diào)用組件嗎？為什么組件還把數(shù)據(jù)傳遞回來？
的確，調(diào)用ui組件時一般是我們傳遞配置參數(shù)給他們。 但是就像elemnt-ui的table組件，你把數(shù)組傳遞給table后，是不是有時候需要拿到某一行的row對象 并根據(jù)row對象里的字段，來判斷一些內(nèi)容的顯示隱藏？ 因為循環(huán)的過程發(fā)生在table組件內(nèi)部，所以table組件可以方便的獲取到每一項數(shù)據(jù)，但是這些數(shù)據(jù)最終不是給組件的，而是我們自己要用的業(yè)務(wù)數(shù)據(jù)。所以也需要一個方式，讓調(diào)用者能拿到自己想要的數(shù)據(jù)
疑問2： 既然子組件最終還要把我給他的數(shù)據(jù)，再返還給我，那我當(dāng)初還干嘛給它，能不能就自己在父組件里玩？
如果你不把數(shù)據(jù)給子組件當(dāng)然可以。但是就等于拋棄掉了子組件的封裝，只能你直接在父組件自己寫一個列表 畢竟你不把數(shù)據(jù)給子組件，子組件還渲染個錘子？沒有父子關(guān)系的話，也就不用什么插槽了。 但是咱不是為了封裝后，可以復(fù)用嘛，總不能永遠不用組件嘛
疑問3： 父組件需要子組件的數(shù)據(jù)？那不會有$emit和vuex嘛，為什么要有slot-scope？
$emit和vuex是數(shù)據(jù)傳遞的一種方法，但是你可以嘗試用$emit和vuex把todo傳遞給父組件。 你會發(fā)現(xiàn)的確沒有合適的鉤子、時機來$emit數(shù)據(jù)一些網(wǎng)上個人認為不太恰當(dāng)?shù)睦?/b>
我認為幾種說法是不太恰當(dāng)?shù)模彩墙o我造成一些困惑的
slot-scope是什么？就是把子組件的數(shù)據(jù)傳遞給父組件的一種方式
這種說法，會讓我覺得slot-scope跟emit和vuex是一類東西
在一些例子中，把數(shù)據(jù)定義在寫死在列表組件中，展示如何把數(shù)據(jù)傳遞出去
這些舉例子的不恰當(dāng)之處，我覺得是不應(yīng)該把數(shù)據(jù)定義在子組件里。
因為真正的使用場景下，子組件的數(shù)據(jù)都是來自父組件的。作為組件內(nèi)部應(yīng)該保持純凈。
就像element-ui里的table組件，肯定不會定義一些數(shù)據(jù)在組件內(nèi)部，然后傳遞給你。
table組件的數(shù)據(jù)都是來自調(diào)用者的，然后table會把每一行的row，在開發(fā)者需要時，傳遞出去。
這些例子雖然不是錯誤，但是我覺得反而不利于理解slot-scope
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96598.html
摘要：具名插槽可以在一個組件中出現(xiàn)次。出現(xiàn)在不同的位置。這個稍微難理解一點。使用非常方便，是基于搭建工程。地址點這里最后如果本文對你理解和有幫助，請不要吝嗇手中的點贊喲。 作者/云荒杯傾 寫在前面 vue中關(guān)于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生算了吧，回頭再...
摘要：它取代了和這兩個目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當(dāng)被提供的內(nèi)容只有默認插槽時，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。如下，讓后備內(nèi)容默認內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope，然后看了一下文檔的更新，于是又重新把插槽學(xué)習(xí)了一篇，下面一段是文檔中的說明: 在 2.6.0 中...
摘要：它取代了和這兩個目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當(dāng)被提供的內(nèi)容只有默認插槽時，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。如下，讓后備內(nèi)容默認內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope，然后看了一下文檔的更新，于是又重新把插槽學(xué)習(xí)了一篇，下面一段是文檔中的說明: 在 2.6.0 中...
摘要：另外需要說明的是，這里只是凍結(jié)了的值，引用不會被凍結(jié)，當(dāng)我們需要數(shù)據(jù)的時候，我們可以重新給賦值。1 狀態(tài)共享 隨著組件的細化，就會遇到多組件狀態(tài)共享的情況，Vuex當(dāng)然可以解決這類問題，不過就像Vuex官方文檔所說的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是vue.js 2.6新增加的Observable API ，通過使用這個api我們可以應(yīng)對一些簡單的跨組件數(shù)...
閱讀 1648·2019-08-30 15:44
閱讀 2570·2019-08-30 11:19
閱讀 401·2019-08-30 11:06
閱讀 1565·2019-08-29 15:27
閱讀 3083·2019-08-29 13:44
閱讀 1628·2019-08-28 18:28
閱讀 2357·2019-08-28 18:17
閱讀 1986·2019-08-26 10:41
