成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【Vue原理】Slot - 白話版

chanthuang / 2503人閱讀

摘要：寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理白話版插槽作為組件一個(gè)重要的部

寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Slot - 白話版

插槽作為組件一個(gè)重要的部分，在項(xiàng)目中也是經(jīng)常會(huì)用到的，起到自定義組件的作用。

插槽，按照處理方式，我覺(jué)得大概可以分為兩種，一種是普通插槽，一種是作用域插槽

普通插槽，就是不給名字的默認(rèn)插槽和 具名插槽

作用域插槽，就是使用子作用域數(shù)據(jù)的插槽

接下來(lái)，我們簡(jiǎn)單解釋一下插槽的處理流程，主要理解思想和流程

普通插槽

下面以默認(rèn)插槽來(lái)說(shuō)，就是不給名字的插槽

父組件中使用組件 test，并且使用插槽

子組件 test 模板

1、父組件先解析，把 test 當(dāng)做子元素處理，把 插槽當(dāng)做 test 的子元素處理，生成這樣的節(jié)點(diǎn)

{    
    tag: "div",    
    children: [{        
        tag: "test",        
        children: ["插入slot 中"]
    }]
}

插槽的節(jié)點(diǎn)就是上面的

["插入slot 中"]

2、子組件解析，slot 作為一個(gè)占位符，會(huì)被解析成一個(gè)函數(shù)

大概意思像 解析成下面

{    
    tag: "main",    
    children: [
        "我在子組件里面",
        _t("default")
    ]
}

3、這個(gè) _t 函數(shù)，傳入 "default " 參數(shù)并執(zhí)行

因?yàn)檫@里不給名字，默認(rèn)插槽，所以是default，如果給了名字，就傳入你的名字

這個(gè)函數(shù)的作用，是把第一步解析得到的插槽節(jié)點(diǎn)拿到，然后返回

那么子組件的節(jié)點(diǎn)就完整了，插槽也成功認(rèn)了爹

{    
    tag: "main",    
    children: ["我在子組件里面","插入slot 中"]
}
作用域插槽

父組件中使用 test 組件，test 組件使用作用域插槽

子組件 test 模板

子組件的數(shù)據(jù)

1、父組件先解析，把 test 當(dāng)做子元素處理，把 插槽包裝成一個(gè)函數(shù)，保存給節(jié)點(diǎn)

大概意思是這樣，為了便于理解主要思想，實(shí)際操作要復(fù)雜很多

{    
    tag: "div",    
    children: [{        
        tag: "test"
        scopeSlots:{            
            default(slotProps){                
                return ["插入slot 中" + slotProps]
            }
        }
    }]
}

2、子組件解析，slot 作為一個(gè)占位符，會(huì)被解析成一個(gè)函數(shù)

{    
    tag: "main",    
    children: [
        "我在子組件里面",
        _t("default",{child:11})
    ]
}

這個(gè) _t 函數(shù)，和普通插槽 的一樣，但是你可以看到，多傳了一個(gè)參數(shù) { child:11 }

為什么多一個(gè)參數(shù)？因?yàn)檫@是作用域插槽啊，子組件要傳給插槽的數(shù)據(jù)啊

_t 函數(shù)執(zhí)行的時(shí)候，得到兩個(gè)參數(shù)

1、插槽函數(shù)名字 default

2、需要的作用域數(shù)據(jù) { child:11 }

_t 內(nèi)部執(zhí)行

1、根據(jù)傳入的名字（"default"），拿到第一步解析插槽得到的函數(shù)（代號(hào)為A）

2、執(zhí)行A，傳入?yún)?shù) { child:11 }

function A(slotProps){    
    return ["插入slot 中" + slotProps]
}

于是作用域插槽，就拿到了子組件傳過(guò)來(lái)的數(shù)據(jù)了

插槽函數(shù)執(zhí)行，會(huì)返回解析后的插槽節(jié)點(diǎn)，_t 拿到這個(gè)節(jié)點(diǎn)，直接 return 出去

于是子組件插槽就完成替換 slot 占位符了，變成下面這樣

{    
    tag: "main",    
    children: [
        "我在子組件里面",
        _t("default",{child:11})
    ]
}

變成下面這樣

{    
    tag: "main",    
    children: [
        "我在子組件里面", 
        "插入slot 中 {child:11}"
    ]
}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105264.html

相關(guān)文章

  • 【Vue原理】Component - 白話版

    摘要：寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理白話版從模板上使用到掛載到頁(yè)面 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    liuyix 評(píng)論0 收藏0

  • 【Vue原理】Slot - 源碼版之普通插槽

    摘要：我們都知道分為普通和作用域，兩個(gè)內(nèi)容都很多，所以分兩部分進(jìn)行講述。今天講的是普通其實(shí)普通，表示默認(rèn)和具名，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)...

    lansheng228 評(píng)論0 收藏0

  • 【Vue原理】Slot - 源碼版之作用域插槽

    摘要：通過(guò)函數(shù)參數(shù)傳遞的形式，讓插槽的變量，在解析時(shí)，先訪問(wèn)函數(shù)變量。那么這兩個(gè)有什么關(guān)系呢外殼節(jié)點(diǎn)保存著所有父組件里給這個(gè)子組件綁定的數(shù)據(jù)，比如，插槽等。 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面...

    tolerious 評(píng)論0 收藏0

  • 【Vue原理】Compile - 源碼版 之 generate 節(jié)點(diǎn)數(shù)據(jù)拼接

    摘要：寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之節(jié)點(diǎn)數(shù)據(jù)拼接上一篇我們 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究...

    fizz 評(píng)論0 收藏0

  • 【Vue原理】Compile - 源碼版 之 generate 節(jié)點(diǎn)拼接

    摘要：還原的難度就在于變成模板了，因?yàn)槠渌氖裁吹仁窃獠粍?dòng)的哈哈，可是直接照抄最后鑒于本人能力有限，難免會(huì)有疏漏錯(cuò)誤的地方，請(qǐng)大家多多包涵，如果有任何描述不當(dāng)?shù)牡胤?，歡迎后臺(tái)聯(lián)系本人，有重謝 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版...

    macg0406 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<