Apakah prinsip pelaksanaan Slot slot Vue3?

Takrifan rasmi slot Vue

Vue melaksanakan satu set API pengedaran kandungan Reka bentuk API ini diinspirasikan oleh draf spesifikasi Komponen Web, menggunakan elemen <slot></slot> sebagai saluran untuk membawa kandungan yang diedarkan. .

Apa sebenarnya Slot

Jadi apa sebenarnya Slot? Slot sebenarnya adalah fungsi yang menerima kandungan slot yang diluluskan oleh komponen induk, kemudian menjana VNode dan mengembalikannya.

Kami biasanya menggunakan pasangan tag <slot></slot> untuk menerima kandungan yang diluluskan oleh komponen induk Kemudian, selepas penyusunan akhir pasangan teg ini, ia adalah fungsi yang mencipta VNode ia satu fungsi yang mencipta slot VNode.

// <slot></slot>标签被vue3编译之后的内容
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _renderSlot(_ctx.$slots, "default")
}

Kita dapat melihat dengan jelas bahawa tag <slot></slot> menjadi fungsi yang dipanggil _renderSlot selepas disusun oleh Vue3.

Cara menggunakan slot

Untuk menggunakan slot, komponen ibu bapa dan anak mesti wujud.

Andaikan komponen induk mempunyai kandungan berikut:

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

Kami menggunakan komponen anak todo-button dalam komponen induk dan lulus kandungan slot Add todo.

kandungan templat subkomponen butang-todo

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

Apabila komponen dipaparkan, <slot></slot> akan digantikan dengan "Tambah todo".

Menyemak prinsip pemaparan komponen

Jadi apakah prinsip asasnya? Sebelum memahami prinsip asas slot, kami juga perlu menyemak prinsip operasi komponen Vue3.

Inti komponen ialah ia boleh menghasilkan sekumpulan VNode. Bagi Vue, teras komponen ialah fungsi pemaparannya Intipati pemasangan komponen adalah untuk melaksanakan fungsi pemaparan dan mendapatkan VNode yang akan diberikan Bagi data/props/dikira, ini semua digunakan untuk menyediakan data untuk fungsi rendering untuk menjana VNode Perkara yang paling penting tentang perkhidmatan sumber ialah VNode akhirnya dihasilkan oleh komponen, kerana ini adalah kandungan yang perlu diberikan.

Prinsip pemulaan slot

Apabila Vue3 menemui jenis komponen VNode, ia akan memasuki proses pemaparan komponen. Proses pemaparan komponen adalah untuk membuat contoh komponen dahulu, dan kemudian memulakan tika komponen Apabila memulakan tika komponen, kandungan berkaitan Slot akan diproses.

Dalam runtime-coresrccomponent.ts kod sumber

Mulakan kandungan berkaitan Slot komponen dalam fungsi initSlots

Kemudian fungsi initSlots adalah panjang Jadi, apa yang telah anda lakukan?

runtime-coresrccomponentSlots.ts

Pertama sekali, kita perlu menentukan sama ada komponen itu ialah komponen Slot komponen Slot? Mula-mula kita perlu kembali dan melihat kod terkumpul komponen induk di atas:

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

Kita dapat melihat bahawa kandungan kanak-kanak bagi komponen Slot ialah jenis Objek, iaitu kod berikut:

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

Kemudian Apabila VNode komponen ini dibuat, ia akan dinilai sama ada anak-anaknya adalah jenis Object Jika ia adalah jenis Object, maka tag komponen Slot akan dilampirkan pada shapeFlag bagi VNode. komponen tersebut.

Jika ia disusun melalui templat, ia adalah kanak-kanak slot standard, dengan atribut _, yang boleh diletakkan terus pada contoh komponen. slots

Jika ia adalah objek slot yang ditulis oleh pengguna sendiri, maka tiada atribut

, jadi ia perlu diseragamkan, menggunakan _. normalizeObjectSlots

Jika tingkah laku pengguna tidak mengikut peraturan, maka ikuti proses

. normalizeVNodeSlots

Menghuraikan kandungan dalam slot

Mari kita lihat dahulu kod selepas subkomponen disusun:

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

Kami juga membincangkannya di atas selepas tag

ialah disusun oleh vue3 Ia menjadi fungsi yang dipanggil <slot></slot>. Fungsi _renderSlot

menerima lima parameter, yang pertama ialah objek fungsi slot pada contoh renderSlot, dan yang kedua ialah nama slot, iaitu Paparkan kandungan slot ke lokasi yang ditentukan Yang ketiga ialah slots yang diterima oleh skop slot Yang keempat ialah fungsi pemaparan kandungan lalai bagi slot yang kelima. props

Prinsip Slot Skop

Slot Skop ialah cara untuk komponen kanak-kanak menghantar parameter daripada komponen induk, membenarkan kandungan slot mengakses data hanya dalam komponen anak.

Templat komponen kanak-kanak

<slot username="coboy"></slot>

Kod tersusun

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _renderSlot(_ctx.$slots, "default", { username: "coboy" })
}

Templat komponen induk

<todo-button>
    <template v-slot:default="slotProps">
        {{ slotProps.username }}
    </template>
</todo-button>

Kod tersusun

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

Seperti yang dinyatakan di atas Melalui renderSlot fungsi, ia boleh diringkaskan secara ringkas sebagai kod berikut

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

ialah kandungan slot yang dimuat naik oleh contoh komponen, sebenarnya kandungan ini slots

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

nama adalah lalai , kemudian slots[ name] mendapat fungsi berikut

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

slot(props), yang jelas merupakan slot({ username: "coboy" }), yang memindahkan data dalam komponen anak ke kandungan slot komponen induk Hit.

具名插槽原理

有时我们需要多个插槽。例如对于一个带有如下模板的 <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 id="header">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函数的源码我们可以看到，

第一步，先获取父组件提供的内容插槽的内容，

在第二个步骤中，若父组件已提供插槽内容，则使用该插槽内容，否则执行默认的内容渲染函数以获取默认内容。

Atas ialah kandungan terperinci Apakah prinsip pelaksanaan Slot slot Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!