資訊專欄INFORMATION COLUMN
摘要：我們都知道分為普通和作用域，兩個內容都很多，所以分兩部分進行講述。今天講的是普通其實普通，表示默認和具名，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧
【Vue原理】Slot - 源碼版之普通插槽
今天我們來解讀Slot 的源碼啦。我們都知道 Slot 分為 普通Slot 和 作用域Slot，兩個內容都很多，所以分兩部分進行講述。
今天講的是普通Slot！
其實普通Slot，表示默認Slot和 具名Slot，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。
而我們就以默認Slot為例去探索，讓我們先設置一個模板例子
父組件模板
test 組件被定義在父組件中
new Vue({
el: document.getElementsByTagName("div")[0],
components: {
test: {
template: `
我在子組件里面
`
}
},
data() {
return {
name: 11
}
}
})
分兩個問題去看
1、插槽內容怎么解析
2、插槽如何插子頁面
插槽內容怎么解析插槽的作用域，是父實例。就是說，普通插槽的變量，都是從父實例上獲取的，比如上面例子插槽內的name
根據上面的例子，父組件被解析成下面的渲染函數
with(this) {
return _c("div", {},
[ _c("test", [
"我是放在組件的 slot " + name
])
], 1)
}
父渲染函數執行時，會綁定父實例為執行作用域，根據 with 的作用，test 的 slot 內的變量name，就會訪問父實例上的name。
那么，當父渲染函數執行時，test組件的slot，所有變量訪問父實例，并開始解析，解析的流程跟普通的模板節點是一樣的
插槽怎么插入子組件當父渲染函數執行完畢，會得到一個完整的VNode，上面存儲著描述DOM 的所有信息，用于去創建需要的DOM。
上面的父組件，會得到這么一個vnode
{
tag:"div",
children:[
{
tag:"test",
children:["我是放在組件的 slot 11"]
}
]
}
可以看到
1、test組件， 被當做是 父組件的一個子元素
2、test 組件內的slot ，被當做是 test元素的子元素
雖然，并不會存在 test 這種標簽的元素，但是Vue統一對待，后面才會特殊處理
1、test 組件內部解析
當父組件解析成功，得到一個vnode，那么下一步就是patch（創建DOM并插入頁面）
此時，Vue會按照渲染好的vnode，生成對應的DOM 樹，并插入到頁面中
當Vue遍歷到上面的vnode的children時，遇到了 test 這個節點，發現沒有test這種標簽，認定他是一個組件之后，會當做一個組件去解析
這個解析的流程不會戲說細說，不屬于Slot 的內容，后面的文章會講
2、Slot 轉存
解析 test 組件時，使用 _init 方法初始化 test 組件的實例
Vue.prototype._init = function(options) {
var vm = this;
if (如果是組件) {
initInternalComponent(vm, options);
}
initRender(vm);
}
初始化test實例時，上面的兩個方法會起到轉存 Slot 的作用
1、initInternalComponent 把 test 組件插槽節點 【 ["我是放在組件的 slot 11"] 】 傳給組件選項的 【_renderChildren】 中
function initInternalComponent(vm, options) {
// 這個options是全局選項和組件設置選項的合集
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"]
}
經過這兩步處理，插槽節點 轉存到了實例上（因為沒有給名字，所以默認是default，如果給了名字，就是你給的）
testVm.$slot={
default: ["我是放在組件的 slot 11"]
}
3、slot 替換到子組件
緊接著，test 實例化初始化完畢，開始使用組件模板去構建他的渲染函數
模板被解析成下面的渲染函數
with(this) {
return _c("main", [
"我在子組件里面",
_t("default")
], 2)
}
你可以看到，子組件的模板中的占位符 slot，被解析成了 _t 函數
_t("default")
然后，test 渲染函數執行，其中 _t("default") 先執行
_t 是 renderSlot 函數，Vue 會給每個實例都保存一個 _t
作用是根據傳入的名字，返回實例上$slot 保存的對應的 【插槽節點】
function installRenderHelpers(target) {
target._t = renderSlot;
}
function renderSlot(name) {
return this.$slots[name]
}
_t("default") 執行完畢，返回插槽節點，于是 test 組件渲染函數就變成下面
with(this) {
return _c("main", [
"我在子組件里面",
["我是放在組件的 slot 11"]
], 2)
}
現在，Slot 就完全插入到子組件中啦，剩下的部分，就是渲染DOM 流程，已經跟 slot 沒有關系啦
用一張圖來看下流程
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105293.html
摘要：通過函數參數傳遞的形式，讓插槽的變量，在解析時，先訪問函數變量。那么這兩個有什么關系呢外殼節點保存著所有父組件里給這個子組件綁定的數據，比如，插槽等。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版插槽作為組件一個重要的部 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
摘要：結合我們的例子，子組件則會生成以下代碼到目前為止，對于普通插槽和作用域插槽已經談的差不多了。下面我們將仔細談談這塊的內容。在看具體實現邏輯前，我們先通過一個例子來先了解下其基本用法然后進行使用頁面展示效果如下看著好。本篇文章是細談 vue 系列第二篇了，上篇我們已經細談了 vue 的核心之一 vdom，傳送門 今天我們將分析我們經常使用的 vue 功能 slot 是如何設計和實現的，本文將圍...
摘要：一旦我們檢測到這些子樹，我們可以把它們變成常數，這樣我們就不需要了在每次重新渲染時為它們創建新的節點在修補過程中完全跳過它們。否則，吊裝費用將會增加好處大于好處，最好總是保持新鮮。 寫文章不容易，點個贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，...
摘要：因為失去焦點之后被強制更新了一波嗯，這就是的作用，把頁面上的顯示值也過濾一遍 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】VModel - 源碼版之input詳...
閱讀 1749·2021-09-26 09:46
閱讀 3028·2021-09-22 15:55
閱讀 2617·2019-08-30 14:17
閱讀 3032·2019-08-26 11:59
閱讀 1816·2019-08-26 11:35
閱讀 3161·2019-08-26 10:45
閱讀 3159·2019-08-23 18:28
閱讀 1134·2019-08-23 18:21
