Vue3插槽Slot實現原理詳解

Posted on by

Vue官方對插槽的定義

Vue 實現瞭一套內容分發的 API，這套 API 的設計靈感源自 Web Components 規范草案，將 <slot> 元素作為承載分發內容的出口。

Slot到底是什麼

那麼Slot到底是什麼呢？Slot其實是一個接受父組件傳過來的插槽內容，然後生成VNode並返回的函數。

我們一般是使用 <slot></slot> 這對標簽進行接受父組件傳過來的內容，那麼這對標簽最終編譯之後是一個創建VNode的函數，我們可以叫做創建插槽VNode的函數。

// <slot></slot>標簽被vue3編譯之後的內容
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _renderSlot(_ctx.$slots, "default")
}

我們可以清楚看到<slot></slot>標簽被Vue3編譯之後的就變成瞭一個叫_renderSlot的函數。

如何使用插槽

要使用插槽那就必須存在父子組件。

假設父組件為一下內容：

<todo-button>
  Add todo
</todo-button>

我們在父組件使用瞭一個todo-button的子組件，並且傳遞瞭Add todo的插槽內容。

todo-button子組件模版內容

<button class="btn-primary">
  <slot></slot>
</button>

當組件渲染的時候，<slot></slot> 將會被替換為“Add todo”。

回顧組件渲染的原理

那麼這其中底層的原理是什麼呢？在理解插槽的底層原理之前，我們還需要回顧一下Vue3的組件運行原理。

組件的核心是它能夠產出一坨VNode。對於 Vue 來說一個組件的核心就是它的渲染函數，組件的掛載本質就是執行渲染函數並得到要渲染的VNode，至於什麼data/props/computed 這都是為渲染函數產出 VNode 過程中提供數據來源服務的，最關鍵的就是組件最終產出的VNode，因為這個才是需要渲染的內容。

插槽的初始化原理

Vue3在渲染VNode的時候，發現VNode的類型是組件類型的時候，就會去走組件渲染的流程。組件渲染的流程就是首先創建組件實例，然後初始化組件實例，在初始化組件實例的時候就會去處理Slot相關的內容。

在源碼的runtime-core\src\component.ts裡面

在函數initSlots裡面初始化組件Slot的相關內容

那麼initSlots函數長啥樣，都幹瞭些什麼呢？

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內容是一個Object類型，也就是下面這段代碼：

{
    default: _withCtx(() => [
      _createTextVNode(" Add todo ")
    ], undefined, true),
    _: 1 /* STABLE */
}

那麼在創建這個組件的VNode的時候，就會去判斷它的children是不是Object類型，如果是Object類型那麼就往該組件的VNode的shapeFlag上掛上一個Slot組件的標記。

如果是通過模板編譯過來的那麼就是標準的插槽children,是帶有_屬性的，是可以直接放在組件實例上的slots屬性。

如果是用戶自己寫的插槽對象，那麼就沒有_屬性，那麼就需要進行規范化處理，走normalizeObjectSlots 。

如果用戶搞騷操作不按規范走，那麼就走normalizeVNodeSlots流程。

解析插槽中的內容

我們先看看子組件編譯之後的代碼：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("button", { class: "btn-primary" }, [
    _renderSlot(_ctx.$slots, "default")
  ]))
}

上面我們也講過瞭<slot></slot>標簽被vue3編譯之後的就變成瞭一個叫_renderSlot的函數。

renderSlot函數接受五個參數，第一個是實例上的插槽函數對象slots，第二個是插槽的名字，也就是將插槽內容渲染到指定位置 ，第三個是插槽作用域接收的props，第四個是插槽的默認內容渲染函數，第五個暫不太清楚什麼意思。

作用域插槽原理

作用域插槽是一種子組件傳父組件的傳參的方式，讓插槽內容能夠訪問子組件中才有的數據 。

子組件模板

<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函數，可以簡單概括成下面的代碼

export function renderSlots(slots, name, props) {
  const slot = slots[name]
  if (slot) {
    if (typeof slot === 'function') {
      return createVNode(Fragment, {}, slot(props))
    }
  }
}

slots是組件實例上傳過來的插槽內容，其實就是這段內容

{
    default: _withCtx((slotProps) => [
      _createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
    ]),
    _: 1 /* STABLE */
}

name是default，那麼slots[name]得到的就是下面這個函數

_withCtx((slotProps) => [
      _createTextVNode(_toDisplayString(slotProps.username), 1 /* TEXT */)
])

slot(props)就很明顯是slot({ username: "coboy" })，這樣就把子組件內的數據傳到父組件的插槽內容中瞭。

具名插槽原理

有時我們需要多個插槽。例如對於一個帶有如下模板的 <base-layout> 組件：

<div class="container">
  <header>
    <!-- 我們希望把頁頭放這裡 -->
  </header>
  <main>
    <!-- 我們希望把主要內容放這裡 -->
  </main>
  <footer>
    <!-- 我們希望把頁腳放這裡 -->
  </footer>
</div>

對於這樣的情況，<slot> 元素有一個特殊的 attribute：name。通過它可以為不同的插槽分配獨立的 ID，也就能夠以此來決定內容應該渲染到什麼地方：

<!--子組件-->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。

在向具名插槽提供內容的時候，我們可以在一個 <template> 元素上使用 v-slot 指令，並以 v-slot 的參數的形式提供其名稱：

<!--父組件-->
<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>

父組件編譯之後的內容：

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 */
  }))
}

子組件編譯之後的內容：

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")
    ])
  ]))
}

通過子組件編譯之後的內容我們可以看到這三個Slot渲染函數

_renderSlot(_ctx.$slots, "header")

_renderSlot(_ctx.$slots, "default")

_renderSlot(_ctx.$slots, "footer")

然後我們再回顧一下renderSlot渲染函數

// renderSlots的簡化
export function renderSlots(slots, name, props) {
  const slot = slots[name]
  if (slot) {
    if (typeof slot === 'function') {
      return createVNode(Fragment, {}, slot(props))
    }
  }
}

這個時候我們就可以很清楚的知道所謂具名函數是通過renderSlots渲染函數的第二參數去定位要渲染的父組件提供的插槽內容。父組件的插槽內容編譯之後變成瞭一個Object的數據類型。

{
    header: _withCtx(() => [
      _createElementVNode("h1", null, "header")
    ]),
    default: _withCtx(() => [
      _createElementVNode("p", null, "default")
    ]),
    footer: _withCtx(() => [
      _createElementVNode("p", null, "footer")
    ]),
    _: 1 /* STABLE */
}

默認內容插槽的原理

我們可能希望這個 <button> 內絕大多數情況下都渲染“Submit”文本。為瞭將“Submit”作為備用內容，我們可以將它放在 <slot> 標簽內

<button type="submit">
  <slot>Submit</slot>
</button>

現在當我們在一個父級組件中使用 <submit-button> 並且不提供任何插槽內容時：

&lt;submit-button&gt;&lt;/submit-button&gt;

備用內容“Submit”將會被渲染：

<button type="submit">
  Submit
</button>

但是如果我們提供內容：

<submit-button>
  Save
</submit-button>

則這個提供的內容將會被渲染從而取代備用內容：

<button type="submit">
  Save
</button>

這其中的原理是什麼呢？我們先來看看上面默認內容插槽編譯之後的代碼

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("button", { type: "submit" }, [
    _renderSlot(_ctx.$slots, "default", {}, () => [
      _createTextVNode("Submit")
    ])
  ]))
}

我們可以看到插槽函數的內容是這樣的

_renderSlot(_ctx.$slots, "default", {}, () => [
    _createTextVNode("Submit")
])

我們再回顧看一下renderSlot函數

renderSlot函數接受五個參數，第四個是插槽的默認內容渲染函數。

再通過renderSlot函數的源碼我們可以看到，

第一步，先獲取父組件提供的內容插槽的內容，

第二步，如果父組件有提供插槽內容則使用父組件提供的內容插槽，沒有則執行默認內容渲染函數得到默認內容。

以上就是Vue3插槽Slot實現原理詳解的詳細內容，更多關於Vue3插槽Slot的資料請關註WalkonNet其它相關文章！

推薦閱讀：