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

資訊專欄INFORMATION COLUMN

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

lansheng228 / 3151人閱讀

摘要：我們都知道分為普通和作用域，兩個內(nèi)容都很多，所以分兩部分進行講述。今天講的是普通其實普通，表示默認(rèn)和具名，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。

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

如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧

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

今天我們來解讀Slot 的源碼啦。我們都知道 Slot 分為 普通Slot 和 作用域Slot，兩個內(nèi)容都很多，所以分兩部分進行講述。

今天講的是普通Slot！

其實普通Slot，表示默認(rèn)Slot和 具名Slot，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。

而我們就以默認(rèn)Slot為例去探索，讓我們先設(shè)置一個模板例子

父組件模板

test 組件被定義在父組件中

new Vue({    
    el: document.getElementsByTagName("div")[0],    
    components: {        
        test: {            
            template: ` 
                
 
                    我在子組件里面 
                    
                
 `
        }
    },
    data() {        
        return {            
            name: 11
        }
    }
})

分兩個問題去看

1、插槽內(nèi)容怎么解析

2、插槽如何插子頁面

插槽內(nèi)容怎么解析

插槽的作用域，是父實例。就是說，普通插槽的變量，都是從父實例上獲取的，比如上面例子插槽內(nèi)的name

根據(jù)上面的例子，父組件被解析成下面的渲染函數(shù)

with(this) {    
    return _c("div", {},
        [ _c("test", [
            "我是放在組件的 slot " + name 
          ]) 
    ], 1)
}

父渲染函數(shù)執(zhí)行時，會綁定父實例為執(zhí)行作用域，根據(jù) with 的作用，test 的 slot 內(nèi)的變量name，就會訪問父實例上的name。

那么，當(dāng)父渲染函數(shù)執(zhí)行時，test組件的slot，所有變量訪問父實例，并開始解析，解析的流程跟普通的模板節(jié)點是一樣的

插槽怎么插入子組件

當(dāng)父渲染函數(shù)執(zhí)行完畢，會得到一個完整的VNode，上面存儲著描述DOM 的所有信息，用于去創(chuàng)建需要的DOM。

上面的父組件，會得到這么一個vnode

{    
    tag:"div",    
    children:[
       { 
          tag:"test",
          children:["我是放在組件的 slot 11"] 
       }
    ]
}

可以看到

1、test組件， 被當(dāng)做是 父組件的一個子元素

2、test 組件內(nèi)的slot ，被當(dāng)做是 test元素的子元素

雖然，并不會存在 test 這種標(biāo)簽的元素，但是Vue統(tǒng)一對待，后面才會特殊處理

1、test 組件內(nèi)部解析

當(dāng)父組件解析成功，得到一個vnode，那么下一步就是patch（創(chuàng)建DOM并插入頁面）

此時，Vue會按照渲染好的vnode，生成對應(yīng)的DOM 樹，并插入到頁面中

當(dāng)Vue遍歷到上面的vnode的children時，遇到了 test 這個節(jié)點，發(fā)現(xiàn)沒有test這種標(biāo)簽，認(rèn)定他是一個組件之后，會當(dāng)做一個組件去解析

這個解析的流程不會戲說細(xì)說，不屬于Slot 的內(nèi)容，后面的文章會講

2、Slot 轉(zhuǎn)存

解析 test 組件時，使用 _init 方法初始化 test 組件的實例

Vue.prototype._init = function(options) {    

    var vm = this;    

    if (如果是組件) {
        initInternalComponent(vm, options);
    }
    initRender(vm);
}

初始化test實例時，上面的兩個方法會起到轉(zhuǎn)存 Slot 的作用

1、initInternalComponent 把 test 組件插槽節(jié)點 【 ["我是放在組件的 slot 11"] 】 傳給組件選項的 【_renderChildren】 中

function initInternalComponent(vm, options) {    

// 這個options是全局選項和組件設(shè)置選項的合集
    var opts = vm.$options = 
            Object.create(vm.constructor.options);  

    var componentOptions = parentVnode.componentOptions;

    // 傳給組件選項_renderChildren
    opts._renderChildren = componentOptions.children;

}

2、initRender 把上一步保存在 組件選項的【_renderChildren】 放在實例的【$slot】中

function initRender(vm) {    

    var options = vm.$options;

    // 保存給組件實例上
    vm.$slots = resolveSlots(options._renderChildren, renderContext);
}

function resolveSlots(children, context) {    

    var slots = {};    

    for (var i = 0,l = children.length; i < l; i++) {        

        var child = children[i];        
        var data = child.data;   

        if (如果是具名slot) {} 
        else { 
            (slots.default || (slots.default = [])).push(child);
        }
    }    
    return slots
}

看父組件下的 test 組件的 vnode

{ 
    tag:"test",    
    children:["我是放在組件的 slot 11"] 
}

經(jīng)過這兩步處理，插槽節(jié)點 轉(zhuǎn)存到了實例上（因為沒有給名字，所以默認(rèn)是default，如果給了名字，就是你給的）

testVm.$slot={ 
    default: ["我是放在組件的 slot 11"] 
}

3、slot 替換到子組件

緊接著，test 實例化初始化完畢，開始使用組件模板去構(gòu)建他的渲染函數(shù)

模板被解析成下面的渲染函數(shù)

with(this) {    
    return _c("main", [        
        "我在子組件里面", 
        _t("default")
    ], 2)
}

你可以看到，子組件的模板中的占位符 slot，被解析成了 _t 函數(shù)

_t("default")

然后，test 渲染函數(shù)執(zhí)行，其中 _t("default") 先執(zhí)行

_t 是 renderSlot 函數(shù)，Vue 會給每個實例都保存一個 _t

作用是根據(jù)傳入的名字，返回實例上$slot 保存的對應(yīng)的 【插槽節(jié)點】

function installRenderHelpers(target) {
    target._t = renderSlot;
}

function renderSlot(name) {    
    return this.$slots[name]
}

_t("default") 執(zhí)行完畢，返回插槽節(jié)點，于是 test 組件渲染函數(shù)就變成下面

with(this) {    
    return _c("main", [        
        "我在子組件里面", 
        ["我是放在組件的 slot 11"]
    ], 2)
}

現(xiàn)在，Slot 就完全插入到子組件中啦，剩下的部分，就是渲染DOM 流程，已經(jīng)跟 slot 沒有關(guān)系啦

用一張圖來看下流程

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

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

相關(guān)文章

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

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

    tolerious 評論0 收藏0

  • 【Vue原理】Slot - 白話版

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

    chanthuang 評論0 收藏0

  • 細(xì)談 vue - slot 篇

    摘要：結(jié)合我們的例子，子組件則會生成以下代碼到目前為止，對于普通插槽和作用域插槽已經(jīng)談的差不多了。下面我們將仔細(xì)談?wù)勥@塊的內(nèi)容。在看具體實現(xiàn)邏輯前，我們先通過一個例子來先了解下其基本用法然后進行使用頁面展示效果如下看著好。本篇文章是細(xì)談 vue 系列第二篇了，上篇我們已經(jīng)細(xì)談了 vue 的核心之一 vdom，傳送門 今天我們將分析我們經(jīng)常使用的 vue 功能 slot 是如何設(shè)計和實現(xiàn)的，本文將圍...

    kaka 評論0 收藏0

  • 【Vue原理】Compile - 源碼版 之 optimize 標(biāo)記靜態(tài)節(jié)點

    摘要：一旦我們檢測到這些子樹，我們可以把它們變成常數(shù)，這樣我們就不需要了在每次重新渲染時為它們創(chuàng)建新的節(jié)點在修補過程中完全跳過它們。否則，吊裝費用將會增加好處大于好處，最好總是保持新鮮。 寫文章不容易，點個贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，...

    Soarkey 評論0 收藏0

  • 【Vue原理】VModel - 源碼版之input詳解

    摘要：因為失去焦點之后被強制更新了一波嗯，這就是的作用，把頁面上的顯示值也過濾一遍 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧 【Vue原理】VModel - 源碼版之input詳...

    leanxi 評論0 收藏0

發(fā)表評論

0條評論

lansheng228

男|高級講師

TA的文章

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