Vue3插槽Slot實現(xiàn)原理詳解
Vue官方對插槽的定義
Vue 實現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設計靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口。
Slot到底是什么
那么Slot到底是什么呢？Slot其實是一個接受父組件傳過來的插槽內(nèi)容，然后生成VNode并返回的函數(shù)。
我們一般是使用 <slot></slot> 這對標簽進行接受父組件傳過來的內(nèi)容，那么這對標簽最終編譯之后是一個創(chuàng)建VNode的函數(shù)，我們可以叫做創(chuàng)建插槽VNode的函數(shù)。
// <slot></slot>標簽被vue3編譯之后的內(nèi)容
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return _renderSlot(_ctx.$slots, "default")
}
我們可以清楚看到<slot></slot>標簽被Vue3編譯之后的就變成了一個叫_renderSlot的函數(shù)。
如何使用插槽
要使用插槽那就必須存在父子組件。
假設父組件為一下內(nèi)容：
<todo-button> Add todo </todo-button>
我們在父組件使用了一個todo-button的子組件，并且傳遞了Add todo的插槽內(nèi)容。
todo-button子組件模版內(nèi)容
<button class="btn-primary"> <slot></slot> </button>
當組件渲染的時候，<slot></slot> 將會被替換為“Add todo”。
回顧組件渲染的原理
那么這其中底層的原理是什么呢？在理解插槽的底層原理之前，我們還需要回顧一下Vue3的組件運行原理。
組件的核心是它能夠產(chǎn)出一坨VNode。對于 Vue 來說一個組件的核心就是它的渲染函數(shù)，組件的掛載本質(zhì)就是執(zhí)行渲染函數(shù)并得到要渲染的VNode，至于什么data/props/computed 這都是為渲染函數(shù)產(chǎn)出 VNode 過程中提供數(shù)據(jù)來源服務的，最關鍵的就是組件最終產(chǎn)出的VNode，因為這個才是需要渲染的內(nèi)容。
插槽的初始化原理
Vue3在渲染VNode的時候，發(fā)現(xiàn)VNode的類型是組件類型的時候，就會去走組件渲染的流程。組件渲染的流程就是首先創(chuàng)建組件實例，然后初始化組件實例，在初始化組件實例的時候就會去處理Slot相關的內(nèi)容。
在源碼的runtime-core\src\component.ts里面
在函數(shù)initSlots里面初始化組件Slot的相關內(nèi)容
那么initSlots函數(shù)長啥樣，都干了些什么呢？
runtime-core\src\componentSlots.ts
首先要判斷該組件是不是Slot組件，那么怎么判斷該組件是不是Slot組件呢？我們先要回去看一下上面父組件編譯之后的代碼：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_todo_button = _resolveComponent("todo-button")
return (_openBlock(), _createBlock(_component_todo_button, null, {
default: _withCtx(() => [
_createTextVNode(" Add todo ")
], undefined, true),
_: 1 /* STABLE */
}))
}
我們可以看到Slot組件的children內(nèi)容是一個Object類型，也就是下面這段代碼：
{
default: _withCtx(() => [
_createTextVNode(" Add todo ")
], undefined, true),
_: 1 /* STABLE */
}
那么在創(chuàng)建這個組件的VNode的時候，就會去判斷它的children是不是Object類型，如果是Object類型那么就往該組件的VNode的shapeFlag上掛上一個Slot組件的標記。
如果是通過模板編譯過來的那么就是標準的插槽children,是帶有_屬性的，是可以直接放在組件實例上的slots屬性。
如果是用戶自己寫的插槽對象，那么就沒有_屬性，那么就需要進行規(guī)范化處理，走normalizeObjectSlots 。
如果用戶搞騷操作不按規(guī)范走，那么就走normalizeVNodeSlots流程。
解析插槽中的內(nèi)容
我們先看看子組件編譯之后的代碼：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("button", { class: "btn-primary" }, [
_renderSlot(_ctx.$slots, "default")
]))
}
上面我們也講過了<slot></slot>標簽被vue3編譯之后的就變成了一個叫_renderSlot的函數(shù)。
renderSlot函數(shù)接受五個參數(shù)，第一個是實例上的插槽函數(shù)對象slots，第二個是插槽的名字，也就是將插槽內(nèi)容渲染到指定位置 ，第三個是插槽作用域接收的props，第四個是插槽的默認內(nèi)容渲染函數(shù)，第五個暫不太清楚什么意思。
作用域插槽原理
作用域插槽是一種子組件傳父組件的傳參的方式，讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù) 。
子組件模板
<slot username="coboy"></slot>
編譯后的代碼
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return _renderSlot(_ctx.$slots, "default", { username: "coboy" })
}
父組件模板
<todo-button>
<template v-slot:default="slotProps">
{{ slotProps.username }}
</template>
</todo-button>
編譯后的代碼
export function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_todo_button = _resolveComponent("todo-button")
return (_openBlock(), _createBlock(_component_todo_button, null, {
default: _withCtx((slotProps) => [
_createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
}
上面講過renderSlot函數(shù)，可以簡單概括成下面的代碼
export function renderSlots(slots, name, props) {
const slot = slots[name]
if (slot) {
if (typeof slot === 'function') {
return createVNode(Fragment, {}, slot(props))
}
}
}
slots是組件實例上傳過來的插槽內(nèi)容，其實就是這段內(nèi)容
{
default: _withCtx((slotProps) => [
_createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}
name是default，那么slots[name]得到的就是下面這個函數(shù)
_withCtx((slotProps) => [
_createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
])
slot(props)就很明顯是slot({ username: "coboy" })，這樣就把子組件內(nèi)的數(shù)據(jù)傳到父組件的插槽內(nèi)容中了。
具名插槽原理
有時我們需要多個插槽。例如對于一個帶有如下模板的 <base-layout> 組件：
<div class="container">
<header>
<!-- 我們希望把頁頭放這里 -->
</header>
<main>
<!-- 我們希望把主要內(nèi)容放這里 -->
</main>
<footer>
<!-- 我們希望把頁腳放這里 -->
</footer>
</div>
對于這樣的情況，<slot> 元素有一個特殊的 attribute：name。通過它可以為不同的插槽分配獨立的 ID，也就能夠以此來決定內(nèi)容應該渲染到什么地方：
<!--子組件-->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。
在向具名插槽提供內(nèi)容的時候，我們可以在一個 <template> 元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱：
<!--父組件-->
<base-layout>
<template v-slot:header>
<h1>header</h1>
</template>
<template v-slot:default>
<p>default</p>
</template>
<template v-slot:footer>
<p>footer</p>
</template>
</base-layout>
父組件編譯之后的內(nèi)容：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_base_layout = _resolveComponent("base-layout")
return (_openBlock(), _createBlock(_component_base_layout, null, {
header: _withCtx(() => [
_createElementVNode("h1", null, "header")
]),
default: _withCtx(() => [
_createElementVNode("p", null, "default")
]),
footer: _withCtx(() => [
_createElementVNode("p", null, "footer")
]),
_: 1 /* STABLE */
}))
}
子組件編譯之后的內(nèi)容：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", { class: "container" }, [
_createElementVNode("header", null, [
_renderSlot(_ctx.$slots, "header")
]),
_createElementVNode("main", null, [
_renderSlot(_ctx.$slots, "default")
]),
_createElementVNode("footer", null, [
_renderSlot(_ctx.$slots, "footer")
])
]))
}
通過子組件編譯之后的內(nèi)容我們可以看到這三個Slot渲染函數(shù)
_renderSlot(_ctx.$slots, "header")
_renderSlot(_ctx.$slots, "default")
_renderSlot(_ctx.$slots, "footer")
然后我們再回顧一下renderSlot渲染函數(shù)
// renderSlots的簡化
export function renderSlots(slots, name, props) {
const slot = slots[name]
if (slot) {
if (typeof slot === 'function') {
return createVNode(Fragment, {}, slot(props))
}
}
}
這個時候我們就可以很清楚的知道所謂具名函數(shù)是通過renderSlots渲染函數(shù)的第二參數(shù)去定位要渲染的父組件提供的插槽內(nèi)容。父組件的插槽內(nèi)容編譯之后變成了一個Object的數(shù)據(jù)類型。
{
header: _withCtx(() => [
_createElementVNode("h1", null, "header")
]),
default: _withCtx(() => [
_createElementVNode("p", null, "default")
]),
footer: _withCtx(() => [
_createElementVNode("p", null, "footer")
]),
_: 1 /* STABLE */
}
默認內(nèi)容插槽的原理
我們可能希望這個 <button> 內(nèi)絕大多數(shù)情況下都渲染“Submit”文本。為了將“Submit”作為備用內(nèi)容，我們可以將它放在 <slot> 標簽內(nèi)
<button type="submit"> <slot>Submit</slot> </button>
現(xiàn)在當我們在一個父級組件中使用 <submit-button> 并且不提供任何插槽內(nèi)容時：
<submit-button></submit-button>
備用內(nèi)容“Submit”將會被渲染：
<button type="submit"> Submit </button>
但是如果我們提供內(nèi)容：
<submit-button> Save </submit-button>
則這個提供的內(nèi)容將會被渲染從而取代備用內(nèi)容：
<button type="submit"> Save </button>
這其中的原理是什么呢？我們先來看看上面默認內(nèi)容插槽編譯之后的代碼
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("button", { type: "submit" }, [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createTextVNode("Submit")
])
]))
}
我們可以看到插槽函數(shù)的內(nèi)容是這樣的
_renderSlot(_ctx.$slots, "default", {}, () => [
_createTextVNode("Submit")
])
我們再回顧看一下renderSlot函數(shù)
renderSlot函數(shù)接受五個參數(shù)，第四個是插槽的默認內(nèi)容渲染函數(shù)。
再通過renderSlot函數(shù)的源碼我們可以看到，
第一步，先獲取父組件提供的內(nèi)容插槽的內(nèi)容，
第二步，如果父組件有提供插槽內(nèi)容則使用父組件提供的內(nèi)容插槽，沒有則執(zhí)行默認內(nèi)容渲染函數(shù)得到默認內(nèi)容。
以上就是Vue3插槽Slot實現(xiàn)原理詳解的詳細內(nèi)容，更多關于Vue3插槽Slot的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了解讀vue頁面監(jiān)聽store值改變問題，具有很好的參考價值，希望對大家有所幫助。2022-10-10
組件化開發(fā)能大幅提高應用的開發(fā)效率、測試性、復用性等,下面這篇文章主要給大家介紹了關于通用vue組件化展示列表數(shù)據(jù)的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-06-06
Ant Design Vue全局對話確認框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對話確認框(confirm)的回調(diào)不觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
使用vue2.0實現(xiàn)自定義彈窗指令，當標簽有該指令時，點擊標簽可以彈出彈窗。下面通過實例代碼給大家介紹Vue自定義彈窗指令的相關知識，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了Vue中.native修飾符的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細的介紹了兩個的用法和區(qū)別，感興趣的可以了解一下2021-08-08
vuejs使用axios異步訪問時用get和post的實例講解
今天小編就為大家分享一篇vuejs使用axios異步訪問時用get和post的實例講解，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
假設?App?的用戶可以在短時間內(nèi)進行多個?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進行的請求變得無關緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請求,需要的朋友可以參考下2023-11-11
vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)代碼
這篇文章主要給大家介紹了關于vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)的相關資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點擊右鍵后出現(xiàn)操作菜單,對選中的數(shù)據(jù)項進行相應的操作,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了使用D3.js+Vue實現(xiàn)一個簡單的柱形圖,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08