資訊專欄INFORMATION COLUMN
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理白話版插槽作為組件一個重要的部
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧
【Vue原理】Slot - 白話版
插槽作為組件一個重要的部分，在項目中也是經(jīng)常會用到的，起到自定義組件的作用。
插槽，按照處理方式，我覺得大概可以分為兩種，一種是普通插槽，一種是作用域插槽
普通插槽，就是不給名字的默認插槽和 具名插槽
作用域插槽，就是使用子作用域數(shù)據(jù)的插槽
接下來，我們簡單解釋一下插槽的處理流程，主要理解思想和流程
普通插槽下面以默認插槽來說，就是不給名字的插槽
父組件中使用組件 test，并且使用插槽
子組件 test 模板
1、父組件先解析，把 test 當(dāng)做子元素處理，把 插槽當(dāng)做 test 的子元素處理，生成這樣的節(jié)點
{
tag: "div",
children: [{
tag: "test",
children: ["插入slot 中"]
}]
}
插槽的節(jié)點就是上面的
["插入slot 中"]
2、子組件解析，slot 作為一個占位符，會被解析成一個函數(shù)
大概意思像 解析成下面
{
tag: "main",
children: [
"我在子組件里面",
_t("default")
]
}
3、這個 _t 函數(shù)，傳入 "default " 參數(shù)并執(zhí)行
因為這里不給名字，默認插槽，所以是default，如果給了名字，就傳入你的名字
這個函數(shù)的作用，是把第一步解析得到的插槽節(jié)點拿到，然后返回
那么子組件的節(jié)點就完整了，插槽也成功認了爹
{
tag: "main",
children: ["我在子組件里面","插入slot 中"]
}
作用域插槽
父組件中使用 test 組件，test 組件使用作用域插槽
子組件 test 模板
子組件的數(shù)據(jù)
1、父組件先解析，把 test 當(dāng)做子元素處理，把 插槽包裝成一個函數(shù)，保存給節(jié)點
大概意思是這樣，為了便于理解主要思想，實際操作要復(fù)雜很多
{
tag: "div",
children: [{
tag: "test"
scopeSlots:{
default(slotProps){
return ["插入slot 中" + slotProps]
}
}
}]
}
2、子組件解析，slot 作為一個占位符，會被解析成一個函數(shù)
{
tag: "main",
children: [
"我在子組件里面",
_t("default",{child:11})
]
}
這個 _t 函數(shù)，和普通插槽 的一樣，但是你可以看到，多傳了一個參數(shù) { child:11 }
為什么多一個參數(shù)？因為這是作用域插槽啊，子組件要傳給插槽的數(shù)據(jù)啊
_t 函數(shù)執(zhí)行的時候，得到兩個參數(shù)
1、插槽函數(shù)名字 default
2、需要的作用域數(shù)據(jù) { child:11 }
_t 內(nèi)部執(zhí)行
1、根據(jù)傳入的名字（"default"），拿到第一步解析插槽得到的函數(shù)（代號為A）
2、執(zhí)行A，傳入?yún)?shù) { child:11 }
function A(slotProps){
return ["插入slot 中" + slotProps]
}
于是作用域插槽，就拿到了子組件傳過來的數(shù)據(jù)了
插槽函數(shù)執(zhí)行，會返回解析后的插槽節(jié)點，_t 拿到這個節(jié)點，直接 return 出去
于是子組件插槽就完成替換 slot 占位符了，變成下面這樣
{
tag: "main",
children: [
"我在子組件里面",
_t("default",{child:11})
]
}
變成下面這樣
{
tag: "main",
children: [
"我在子組件里面",
"插入slot 中 {child:11}"
]
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105264.html
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理白話版從模板上使用到掛載到頁面 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：我們都知道分為普通和作用域，兩個內(nèi)容都很多，所以分兩部分進行講述。今天講的是普通其實普通，表示默認和具名，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請...
摘要：通過函數(shù)參數(shù)傳遞的形式，讓插槽的變量，在解析時，先訪問函數(shù)變量。那么這兩個有什么關(guān)系呢外殼節(jié)點保存著所有父組件里給這個子組件綁定的數(shù)據(jù)，比如，插槽等。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之節(jié)點數(shù)據(jù)拼接上一篇我們 寫文章不容易，點個贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究...
摘要：還原的難度就在于變成模板了，因為其他的什么等是原封不動的哈哈，可是直接照抄最后鑒于本人能力有限，難免會有疏漏錯誤的地方，請大家多多包涵，如果有任何描述不當(dāng)?shù)牡胤剑瑲g迎后臺聯(lián)系本人，有重謝 寫文章不容易，點個贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版...
閱讀 3551·2021-10-09 09:43
閱讀 6148·2021-09-07 10:15
閱讀 2746·2019-08-30 14:03
閱讀 3074·2019-08-29 11:01
閱讀 1715·2019-08-29 10:56
閱讀 1074·2019-08-28 17:52
閱讀 3502·2019-08-26 11:42
閱讀 2547·2019-08-26 10:33
