Vue3插槽Slot實(shí)現(xiàn)原理詳解
Vue官方對(duì)插槽的定義
Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口。
Slot到底是什么
那么Slot到底是什么呢？Slot其實(shí)是一個(gè)接受父組件傳過(guò)來(lái)的插槽內(nèi)容，然后生成VNode并返回的函數(shù)。
我們一般是使用 <slot></slot> 這對(duì)標(biāo)簽進(jìn)行接受父組件傳過(guò)來(lái)的內(nèi)容，那么這對(duì)標(biāo)簽最終編譯之后是一個(gè)創(chuàng)建VNode的函數(shù)，我們可以叫做創(chuàng)建插槽VNode的函數(shù)。
// <slot></slot>標(biāo)簽被vue3編譯之后的內(nèi)容
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return _renderSlot(_ctx.$slots, "default")
}
我們可以清楚看到<slot></slot>標(biāo)簽被Vue3編譯之后的就變成了一個(gè)叫_renderSlot的函數(shù)。
如何使用插槽
要使用插槽那就必須存在父子組件。
假設(shè)父組件為一下內(nèi)容：
<todo-button> Add todo </todo-button>
我們?cè)诟附M件使用了一個(gè)todo-button的子組件，并且傳遞了Add todo的插槽內(nèi)容。
todo-button子組件模版內(nèi)容
<button class="btn-primary"> <slot></slot> </button>
當(dāng)組件渲染的時(shí)候，<slot></slot> 將會(huì)被替換為“Add todo”。
回顧組件渲染的原理
那么這其中底層的原理是什么呢？在理解插槽的底層原理之前，我們還需要回顧一下Vue3的組件運(yùn)行原理。
組件的核心是它能夠產(chǎn)出一坨VNode。對(duì)于 Vue 來(lái)說(shuō)一個(gè)組件的核心就是它的渲染函數(shù)，組件的掛載本質(zhì)就是執(zhí)行渲染函數(shù)并得到要渲染的VNode，至于什么data/props/computed 這都是為渲染函數(shù)產(chǎn)出 VNode 過(guò)程中提供數(shù)據(jù)來(lái)源服務(wù)的，最關(guān)鍵的就是組件最終產(chǎn)出的VNode，因?yàn)檫@個(gè)才是需要渲染的內(nèi)容。
插槽的初始化原理
Vue3在渲染VNode的時(shí)候，發(fā)現(xiàn)VNode的類型是組件類型的時(shí)候，就會(huì)去走組件渲染的流程。組件渲染的流程就是首先創(chuàng)建組件實(shí)例，然后初始化組件實(shí)例，在初始化組件實(shí)例的時(shí)候就會(huì)去處理Slot相關(guān)的內(nèi)容。
在源碼的runtime-core\src\component.ts里面
在函數(shù)initSlots里面初始化組件Slot的相關(guān)內(nèi)容
那么initSlots函數(shù)長(zhǎng)啥樣，都干了些什么呢？
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)容是一個(gè)Object類型，也就是下面這段代碼：
{
default: _withCtx(() => [
_createTextVNode(" Add todo ")
], undefined, true),
_: 1 /* STABLE */
}
那么在創(chuàng)建這個(gè)組件的VNode的時(shí)候，就會(huì)去判斷它的children是不是Object類型，如果是Object類型那么就往該組件的VNode的shapeFlag上掛上一個(gè)Slot組件的標(biāo)記。
如果是通過(guò)模板編譯過(guò)來(lái)的那么就是標(biāo)準(zhǔn)的插槽children,是帶有_屬性的，是可以直接放在組件實(shí)例上的slots屬性。
如果是用戶自己寫(xiě)的插槽對(duì)象，那么就沒(méi)有_屬性，那么就需要進(jìn)行規(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")
]))
}
上面我們也講過(guò)了<slot></slot>標(biāo)簽被vue3編譯之后的就變成了一個(gè)叫_renderSlot的函數(shù)。
renderSlot函數(shù)接受五個(gè)參數(shù)，第一個(gè)是實(shí)例上的插槽函數(shù)對(duì)象slots，第二個(gè)是插槽的名字，也就是將插槽內(nèi)容渲染到指定位置 ，第三個(gè)是插槽作用域接收的props，第四個(gè)是插槽的默認(rèn)內(nèi)容渲染函數(shù)，第五個(gè)暫不太清楚什么意思。
作用域插槽原理
作用域插槽是一種子組件傳父組件的傳參的方式，讓插槽內(nèi)容能夠訪問(wèn)子組件中才有的數(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 */
}))
}
上面講過(guò)renderSlot函數(shù)，可以簡(jiǎn)單概括成下面的代碼
export function renderSlots(slots, name, props) {
const slot = slots[name]
if (slot) {
if (typeof slot === 'function') {
return createVNode(Fragment, {}, slot(props))
}
}
}
slots是組件實(shí)例上傳過(guò)來(lái)的插槽內(nèi)容，其實(shí)就是這段內(nèi)容
{
default: _withCtx((slotProps) => [
_createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}
name是default，那么slots[name]得到的就是下面這個(gè)函數(shù)
_withCtx((slotProps) => [
_createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
])
slot(props)就很明顯是slot({ username: "coboy" })，這樣就把子組件內(nèi)的數(shù)據(jù)傳到父組件的插槽內(nèi)容中了。
具名插槽原理
有時(shí)我們需要多個(gè)插槽。例如對(duì)于一個(gè)帶有如下模板的 <base-layout> 組件：
<div class="container">
<header>
<!-- 我們希望把頁(yè)頭放這里 -->
</header>
<main>
<!-- 我們希望把主要內(nèi)容放這里 -->
</main>
<footer>
<!-- 我們希望把頁(yè)腳放這里 -->
</footer>
</div>
對(duì)于這樣的情況，<slot> 元素有一個(gè)特殊的 attribute：name。通過(guò)它可以為不同的插槽分配獨(dú)立的 ID，也就能夠以此來(lái)決定內(nèi)容應(yīng)該渲染到什么地方：
<!--子組件-->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”。
在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè) <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")
])
]))
}
通過(guò)子組件編譯之后的內(nèi)容我們可以看到這三個(gè)Slot渲染函數(shù)
_renderSlot(_ctx.$slots, "header")
_renderSlot(_ctx.$slots, "default")
_renderSlot(_ctx.$slots, "footer")
然后我們?cè)倩仡櫼幌聄enderSlot渲染函數(shù)
// renderSlots的簡(jiǎn)化
export function renderSlots(slots, name, props) {
const slot = slots[name]
if (slot) {
if (typeof slot === 'function') {
return createVNode(Fragment, {}, slot(props))
}
}
}
這個(gè)時(shí)候我們就可以很清楚的知道所謂具名函數(shù)是通過(guò)renderSlots渲染函數(shù)的第二參數(shù)去定位要渲染的父組件提供的插槽內(nèi)容。父組件的插槽內(nèi)容編譯之后變成了一個(gè)Object的數(shù)據(jù)類型。
{
header: _withCtx(() => [
_createElementVNode("h1", null, "header")
]),
default: _withCtx(() => [
_createElementVNode("p", null, "default")
]),
footer: _withCtx(() => [
_createElementVNode("p", null, "footer")
]),
_: 1 /* STABLE */
}
默認(rèn)內(nèi)容插槽的原理
我們可能希望這個(gè) <button> 內(nèi)絕大多數(shù)情況下都渲染“Submit”文本。為了將“Submit”作為備用內(nèi)容，我們可以將它放在 <slot> 標(biāo)簽內(nèi)
<button type="submit"> <slot>Submit</slot> </button>
現(xiàn)在當(dāng)我們?cè)谝粋€(gè)父級(jí)組件中使用 <submit-button> 并且不提供任何插槽內(nèi)容時(shí)：
<submit-button></submit-button>
備用內(nèi)容“Submit”將會(huì)被渲染：
<button type="submit"> Submit </button>
但是如果我們提供內(nèi)容：
<submit-button> Save </submit-button>
則這個(gè)提供的內(nèi)容將會(huì)被渲染從而取代備用內(nèi)容：
<button type="submit"> Save </button>
這其中的原理是什么呢？我們先來(lái)看看上面默認(rèn)內(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")
])
我們?cè)倩仡櫩匆幌聄enderSlot函數(shù)
renderSlot函數(shù)接受五個(gè)參數(shù)，第四個(gè)是插槽的默認(rèn)內(nèi)容渲染函數(shù)。
再通過(guò)renderSlot函數(shù)的源碼我們可以看到，
第一步，先獲取父組件提供的內(nèi)容插槽的內(nèi)容，
第二步，如果父組件有提供插槽內(nèi)容則使用父組件提供的內(nèi)容插槽，沒(méi)有則執(zhí)行默認(rèn)內(nèi)容渲染函數(shù)得到默認(rèn)內(nèi)容。
以上就是Vue3插槽Slot實(shí)現(xiàn)原理詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3插槽Slot的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新
今天小編就為大家分享一篇vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
很多人知道插槽分為三種，但是實(shí)際到elementui當(dāng)中為什么這么用，就一臉懵逼，接下來(lái)就跟大家聊一聊插槽在elementui中的應(yīng)用，并且自己寫(xiě)一個(gè)類似el-table的組件，感興趣的可以了解一下2023-05-05
vue實(shí)現(xiàn)簡(jiǎn)易計(jì)時(shí)器組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易計(jì)時(shí)器組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue嵌套組件傳參實(shí)例分享，本文以一個(gè)vue遞歸組件為例，探究多層嵌套后事件無(wú)法觸發(fā)的問(wèn)題，我們可以通過(guò)查看一Demo，便于快速了解，下文列舉例子需要的小伙伴可以參考一下2022-04-04
Vue路由跳轉(zhuǎn)傳參或者打開(kāi)新頁(yè)面跳轉(zhuǎn)問(wèn)題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開(kāi)新頁(yè)面跳轉(zhuǎn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本文給大家詳細(xì)講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關(guān)注意事項(xiàng)做了講述，有興趣的朋友學(xué)習(xí)下。2018-03-03
Vue3中createWebHistory和createWebHashHistory的區(qū)別詳析
這篇文章主要給大家介紹了關(guān)于Vue3中createWebHistory和createWebHashHistory區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見(jiàn)使用的就是Vue配套的Vue Router庫(kù)，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
$是在vue中所有實(shí)例中都可用的一個(gè)簡(jiǎn)單約定,這樣做會(huì)避免和已被定義的數(shù)據(jù),方法,計(jì)算屬性產(chǎn)生沖突,下面這篇文章主要給大家介紹了關(guān)于vue中$含義及其用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01