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