【Vue原理】Slot - 白話版

寫文章不容易，點個讚唄兄弟 專一 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧 研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者 拉到 下面關注公衆號也能夠吧

【Vue原理】Slot - 白話版

插槽做爲組件一個重要的部分，在項目中也是常常會用到的，起到自定義組件的做用。

插槽，按照處理方式，我以爲大概能夠分爲兩種，一種是普通插槽，一種是做用域插槽

普通插槽，就是不給名字的默認插槽和 具名插槽

做用域插槽，就是使用子做用域數據的插槽

接下來，咱們簡單解釋一下插槽的處理流程，主要理解思想和流程

---

普通插槽

下面以默認插槽來講，就是不給名字的插槽

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

子組件 test 模板

一、父組件先解析，把 test 當作子元素處理，把 插槽當作 test 的子元素處理，生成這樣的節點

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

插槽的節點就是上面的

['插入slot 中']

二、子組件解析，slot 做爲一個佔位符，會被解析成一個函數

大概意思像 解析成下面

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

三、這個 _t 函數，傳入 'default ' 參數並執行

由於這裏不給名字，默認插槽，因此是default，若是給了名字，就傳入你的名字

這個函數的做用，是把第一步解析獲得的插槽節點拿到，而後返回

那麼子組件的節點就完整了，插槽也成功認了爹

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

---

做用域插槽

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

子組件 test 模板

子組件的數據

一、父組件先解析，把 test 當作子元素處理，把 插槽包裝成一個函數，保存給節點

大概意思是這樣，爲了便於理解主要思想，實際操做要複雜不少

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

二、子組件解析，slot 做爲一個佔位符，會被解析成一個函數

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

這個 _t 函數，和普通插槽 的同樣，可是你能夠看到，多傳了一個參數 { child:11 }

爲何多一個參數？由於這是做用域插槽啊，子組件要傳給插槽的數據啊

_t 函數執行的時候，獲得兩個參數

一、插槽函數名字 default

二、須要的做用域數據 { child:11 }

_t 內部執行

一、根據傳入的名字（'default'），拿到第一步解析插槽獲得的函數（代號爲A）

二、執行A，傳入參數 { child:11 }

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

因而做用域插槽，就拿到了子組件傳過來的數據了

插槽函數執行，會返回解析後的插槽節點，_t 拿到這個節點，直接 return 出去

因而子組件插槽就完成替換 slot 佔位符了，變成下面這樣

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

變成下面這樣

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