Vue3 슬롯 슬롯의 구현 원리는 무엇입니까?

Vue의 공식 슬롯 정의

Vue는 콘텐츠 배포 API 세트를 구현합니다. 이 API의 디자인은 <slot></slot> 요소를 배포용 캐리어로 사용하여 웹 구성 요소 사양 초안에서 영감을 받았습니다. 내용. <slot></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类型为组件时，会进入组件渲染流程。组件渲染的流程就是首先创建组件实例，然后初始化组件实例，在初始化组件实例的时候就会去处理Slot相关的内容。

在源码的runtime-coresrccomponent.ts里面

在函数initSlots里面初始化组件Slot的相关内容

那么initSlots函数长啥样，都干了些什么呢？

runtime-coresrccomponentSlots.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

슬롯이란 정확히 무엇인가요?

슬롯이란 정확히 무엇인가요? 슬롯은 실제로 상위 구성 요소가 전달한 슬롯 콘텐츠를 수락한 다음 VNode를 생성하고 반환하는 함수입니다.

우리는 일반적으로 <slot></slot>를 사용하여 상위 구성 요소가 전달한 콘텐츠를 수락합니다. 그런 다음 이 태그 쌍을 최종 컴파일한 후 VNode를 생성하는 함수가 됩니다. . 슬롯 VNode를 생성하는 함수를 호출할 수 있습니다. 🎜

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

🎜 <slot></slot> 태그가 Vue3으로 컴파일된 후 _renderSlot이라는 함수가 되는 것을 확실히 볼 수 있습니다. 🎜🎜슬롯 사용 방법🎜🎜슬롯을 사용하려면 상위-하위 구성 요소가 있어야 합니다. 🎜🎜상위 구성 요소에 다음 콘텐츠가 있다고 가정합니다. 🎜

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

🎜 상위 구성 요소에서 todo-button의 하위 구성 요소를 사용하고 Add todo의 슬롯 콘텐츠를 전달합니다. 🎜🎜todo 버튼 하위 구성 요소 템플릿 콘텐츠🎜

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

🎜구성 요소가 렌더링되면 <slot></slot>가 "Add todo"로 대체됩니다. 🎜🎜컴포넌트 렌더링의 원리 검토🎜🎜그럼 기본 원리는 무엇인가요? 슬롯의 기본 원리를 이해하기 전에 Vue3 구성 요소의 작동 원리도 검토해야 합니다. 🎜🎜컴포넌트의 핵심은 다수의 VNode를 생성할 수 있다는 것입니다. Vue의 경우 컴포넌트 탑재의 핵심은 렌더링 기능을 실행하고 렌더링할 VNode를 얻는 것입니다. VNode를 생성하는 렌더링 기능 소스 서비스에서 가장 중요한 것은 컴포넌트가 최종적으로 생성한 VNode입니다. 왜냐하면 이것이 렌더링되어야 하는 콘텐츠이기 때문입니다. 🎜🎜슬롯의 초기화 원리🎜🎜Vue3가 VNode 유형의 구성 요소를 발견하면 구성 요소 렌더링 프로세스에 들어갑니다. 컴포넌트 렌더링 프로세스는 먼저 컴포넌트 인스턴스를 생성한 다음 컴포넌트 인스턴스를 초기화하는 것입니다. 컴포넌트 인스턴스를 초기화하면 Slot 관련 콘텐츠가 처리됩니다. 🎜🎜소스 코드의 Runtime-coresrccomComponent.ts에서🎜🎜🎜🎜initSlots 함수에서 슬롯 관련 콘텐츠를 초기화합니다.🎜🎜그렇다면 initSlots 함수는 어떤 모습이고 어떤 역할을 할까요? 🎜🎜runtime-coresrccomComponentSlots.ts🎜🎜🎜🎜우선 해당 컴포넌트가 Slot 컴포넌트인지 확인해야 합니다. 그러면 해당 컴포넌트가 Slot 컴포넌트인지 어떻게 확인할까요? 먼저 돌아가서 위 상위 구성 요소의 컴파일된 코드를 살펴봐야 합니다. 🎜

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

🎜 Slot 구성 요소의 하위 콘텐츠가 다음 코드인 개체 유형임을 알 수 있습니다. 🎜

<!--父组件-->
<base-layout>
  <template v-slot:header>
    <h2>header</h2>
  </template>
  <template v-slot:default>
    <p>default</p>
  </template>
  <template v-slot:footer>
    <p>footer</p>
  </template>
</base-layout>

🎜 그러면 이 구성 요소의 VNode를 생성하면 해당 하위 항목이 Object 유형인지 확인합니다. Object 유형인 경우 구성 요소 VNode의 ShapeFlag에 슬롯 구성 요소 표시를 걸어 놓습니다. 🎜🎜템플릿을 통해 컴파일된 경우 구성 요소 인스턴스에 직접 배치할 수 있는 slots 속성인 _ 속성이 있는 표준 슬롯 하위 항목입니다. . 🎜🎜슬롯 개체를 사용자가 직접 작성한 경우 _ 속성이 없으므로 normalizeObjectSlots를 사용하여 정규화해야 합니다. 🎜🎜사용자의 번거로운 작업이 사양을 따르지 않는 경우 normalizeVNodeSlots 프로세스를 따르세요. 🎜🎜슬롯의 콘텐츠를 구문 분석합니다🎜🎜먼저 하위 구성 요소의 컴파일된 코드를 살펴보겠습니다.🎜

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("h2", null, "header")
    ]),
    default: _withCtx(() => [
      _createElementVNode("p", null, "default")
    ]),
    footer: _withCtx(() => [
      _createElementVNode("p", null, "footer")
    ]),
    _: 1 /* STABLE */
  }))
}

🎜위에서 <slot></slot> 태그가 컴파일된다는 점도 언급했습니다. by vue3 이후에는 _renderSlot이라는 함수가 됩니다. 🎜🎜🎜🎜renderSlot 함수는 5개의 매개변수를 허용합니다. 첫 번째는 인스턴스의 슬롯 함수 개체 slots이고, 두 번째는 슬롯 콘텐츠를 인스턴스에 렌더링하는 슬롯의 이름입니다. Position이 지정되었으며, 세 번째는 슬롯 범위에서 수신한 props이고, 네 번째는 슬롯의 기본 콘텐츠 렌더링 기능이며, 다섯 번째는 무엇을 의미하는지 명확하지 않습니다. 🎜🎜스코프 슬롯의 원리🎜🎜스코프 슬롯은 하위 구성 요소가 상위 구성 요소의 매개변수를 전달하는 방법이므로 슬롯 콘텐츠가 하위 구성 요소의 데이터에만 액세스할 수 있습니다. 🎜🎜하위 컴포넌트 템플릿🎜

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

🎜컴파일된 코드🎜

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

🎜상위 컴포넌트 템플릿🎜

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

🎜컴파일된 코드🎜

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

🎜renderSlot 함수는 위에서 언급했는데, 간단히 다음 코드로 요약할 수 있습니다🎜

<submit-button></submit-button>

🎜slots code >는 구성 요소 인스턴스에 의해 업로드된 슬롯 콘텐츠입니다. 실제로는 이 콘텐츠입니다. 🎜<pre class="brush:php;toolbar:false">&lt;button type=&quot;submit&quot;&gt; Submit &lt;/button&gt;</pre>🎜name이 기본값이고, Slot[name]이 가져오는 기능은 다음과 같습니다. 🎜<pre class="brush:php;toolbar:false">&lt;submit-button&gt; Save &lt;/submit-button&gt;</pre>🎜slot(props)는 분명히 Slot({ 사용자 이름: "coboy" }), 따라서 하위 구성 요소의 데이터를 상위 구성 요소의 슬롯 콘텐츠로 전달합니다. 🎜<h3>具名插槽原理</h3> <p>有时我们需要多个插槽。例如对于一个带有如下模板的 <code><base-layout></base-layout> 组件：

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

对于这样的情况，<slot></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></slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 <template></template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<!--父组件-->
<base-layout>
  <template v-slot:header>
    <h2>header</h2>
  </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("h2", 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("h2", null, "header")
    ]),
    default: _withCtx(() => [
      _createElementVNode("p", null, "default")
    ]),
    footer: _withCtx(() => [
      _createElementVNode("p", null, "footer")
    ]),
    _: 1 /* STABLE */
}

默认内容插槽的原理

我们可能希望这个 <button></button> 内绝大多数情况下都渲染“Submit”文本。为了将“Submit”作为备用内容，我们可以将它放在 <slot></slot> 标签内

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

现在当我们在一个父级组件中使用 <submit-button></submit-button> 并且不提供任何插槽内容时：

<submit-button></submit-button>

备用内容“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 슬롯 슬롯의 구현 원리는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!