Mari kita bincangkan tentang prinsip Vue.slot dan mari kita terokai cara slot dilaksanakan!

Artikel ini akan berkongsi dengan anda beberapa maklumat berguna tentang Vue dan bercakap tentang prinsip Vue.slot yang mungkin anda tidak tahu.

Saya percaya bahawa sama ada pembangunan perniagaan harian atau enkapsulasi komponen asas, 插槽slot sering muncul dalam bidang penglihatan kita kerana ia memberikan kita pelaksanaan pengaturcaraan Banyak kemudahan. Mungkin anda sudah biasa dengan penggunaan slot, sama ada slot yang dinamakan, atau slot berskop, pelbagai kegunaan, dan lain-lain... Jadi tahukah anda caranya? lapisan bawah slot dan slot-scope dilaksanakan?

Mudah difahami, Anda boleh mengambil analisis pelaksanaan kod sumber kering Vue.slot dalam masa 10 minit ! ! ! Ikuti penulis untuk meneroka bagaimana slot dalam dilaksanakan! ! Artikel ini terutamanya akan menerangkannya dalam dua bahagian: Vue（v2.6.14）slot

Slot biasa (slot dinamakan, slot lalai)
Slot skop
Artikel ini tidak mempunyai analisis kod sumber yang tidak jelas, ia diterangkan secara langsung dalam bahasa vernakular, jadi tidak kira betapa biasa anda dengan kod sumber Vue, anda boleh memahaminya. Melalui penyahpepijatan di tapak, anda boleh melihat dengan jelas cara

daripada

dilaksanakan. jom pergi pergi! (Belajar perkongsian video: Vuetutorial video vueslot) 1. Semakan

Penggunaan

slot Mari kita semak semula penggunaan umum slot. Penggunaan

di sini menggunakan standard baharu

2.6.0slot (artikel ini juga akan membincangkan perbezaan antara kaedah penulisan dan pelaksanaan kod sumber !). v2.5v2.6

Jika anda ingin mengetahui lebih lanjut tentang penggunaan, anda boleh pergi ke laman web rasmi untuk membaca dokumentasi slot Vue secara terperinci

https://cn.vuejs.org/v2/ guide/components-slots.html

1. Slot lalai

Kesan paparan halaman adalah seperti yang ditunjukkan dalam rajah:

<!-- 子组件 -->
<template>
  <div class="wrapper">
    <!-- 默认插槽 -->
    <div class="main">
      <slot></slot>
    </div>
</template>

<!-- 父组件 -->
<my-slot>
  <template>
    <h1>默认插槽</h1>
  </template>
</my-slot>

2. Slot bernama

Ikut kes di atas, tambah slot bernama

, kodnya adalah seperti berikut:

header

Blok kod di atas boleh didapati :

<!-- 子组件 -->
<template>
  <div class="wrapper">
    <!-- header 具名插槽 -->
    <header class="header">
      <slot name="header"></slot>
    </header>
    <!-- 默认插槽 -->
    <div class="main">
      <slot></slot>
    </div>
</template>

<!-- 父组件 -->
<my-slot>
  <template v-slot:header>
    <h1>header 具名插槽</h1>
  </template>
  <template>
    <h1>默认插槽</h1>
  </template>
</my-slot>

dalam subkomponen
• mempunyai atribut bernama

  dengan nilai slot标签nameheader

The
• dalam komponen induk mempunyai atribut dengan nilai

  Kesan paparan halaman untuk template标签v-slotheader

adalah seperti berikut:

3. Skop-slot

Ikuti kes di atas dan tambah slot skop

, kodnya adalah seperti berikut

footer

Blok kod di atas boleh didapati:

<!-- 子组件 -->
<template>
  <div class="wrapper">
    <!-- header 具名插槽 -->
    <header class="header">
      <slot name="header"></slot>
    </header>
    <!-- 默认插槽 -->
    <div class="main">
      <slot></slot>
    </div>
    <!-- footer 具名 + 作用域插槽 -->
    <footer class="footer">
      <slot name="footer" :footerInfo="footerInfo"></slot>
    </footer>
  </div>
</template>
<script>
export default {
  name: "mySlot",
  data () {
    return {
      footerInfo: {
        text: &#39;这是 子组件 footer插槽 的作用域数据&#39;
      }
    }
  }
}
</script>

<!-- 父组件 -->
<my-slot>
  <template v-slot:header>
    <h1>header 具名插槽</h1>
  </template>
  <template>
    <h1>默认插槽</h1>
  </template>
  <template v-slot:footer="slotProps">
    <h1>footer 具名 + 作用域插槽</h1>
    <p>{{ slotProps.footerInfo.text }}</p>
  </template>
</my-slot>

dalam subkomponen Selain atribut
• ,

  juga mempunyai atribut slot标签 (fungsinya adalah untuk menghantar data subkomponen) name=footer:footerInfo="footerInfo"

• dalam komponen induk bukan sahaja mempunyai

  , malah terdapat juga operasi tugasan template标签 Dalam sintaks kurungan berganda templat, anda boleh mengakses terus v-slot:footer="slotProps"slotPropsfooterInfo

  halaman sub-komponen melalui
Kesan paparan halaman adalah seperti berikut Gambar:

Baiklah, selepas sebentar. menyemak penggunaan, pengarang akan bertanya tiga soalan di sini:

Slot biasa, skop Pada peringkat manakah vNod slot dijana semasa memaparkan komponen induk atau semasa memaparkan komponen anak?

1. Slot skop Mengapakah data komponen anak boleh diakses daripada komponen induk?
2. Adakah terdapat perbezaan dalam pelaksanaan antara slot biasa dan slot skop?
3. Mari baca dengan soalan!

2. Perbezaan dalam kompilasi yang berbeza

slotBerdasarkan kod kes terakhir di atas, kami melaksanakan arahan pembungkusan untuk melihat cara Vue mengendalikan kami semasa menyusun templat

Daripada! Tanpa berlengah lagi, mari

memberitahu anda secara rahsia Perbezaan antara slot pemprosesan buildslot skopVue dan slot biasa bermula dengan kompilasi, iaitu Hanya fungsi render akan menjadi berbeza) Di sini saya menggunakan

kaedah penulisan slot yang dinamakan untuk rujukan anda (tulis semula pengepala slot yang dinamakan dan gunakan kaedah penulisan

), anda boleh Lihat perbezaan cara untuk tulis dan laksanakan slot bernama dalam v2.5 dan slot="header"~ Ia tidak sukar, jadi saya mengeluarkannya untuk melihat v2.6

上图左边是 v2.6 、右边是 v2.5 的，这里，我们集中关注：

• scopedSlots 属性。使用作用域插槽的 footer 的 render函数 是放在 scopedSlots 里的，并且 函数中 还有接收一个参数

• my-slot 的 children。可以发现，默认插槽的 render函数 一直都是作为当前组件的childre节点，放在 当前 组件render函数 的第三个参数中

• 关注 header 两种具名插槽写法的区别。

  • v2.6 中，我们使用了具名插槽，但是又未使用 作用域插槽的 header 也被放在了 scopedSlots，但是函数的参数为空，这点跟作用域插槽有区别。
  • v2.5 中， 具名插槽header 仅仅作为 my-slot组件 的children节点，并且其render函数的第二个参数中有一个 slot 的属性。

其实根据上述编译后的结果，我们不妨这样猜测：

• 默认插槽直接在父组件的 render 阶段生成 vNode。

  • 子组件 render 时，可能通过某种手段取得已经生成好的 插槽vNode 用作自己的 slot 节点。
  • 因为观察上述默认插槽的render函数：e("h1", [t._v("默认插槽")])，直接就是 my-slot 组件的childre节点（位于 my-slot 组件的第三个参数）。

• 作用域插槽是在子组件 render 阶段生成 vNode。

  • 因为我们观察作用域插槽 footer 的编译后结果，其不作为 my-slot 组件的 children，而是被放在了 my-slot 组件的 第二个参数 data 中的一个 scopedSlots属性里。
  • 并且，作用域插槽的 render 函数 外层的 funciton 接收了一个参数。如果在执行子组件 render 的时候调用，那完全可以拿到子组件的数据。

这里放出具体的 作用域插槽 打包后代码，大家一看就很清晰了：

{
  scopedSlots: t._u([
    {
      key: "footer", 
      // 函数接收了一个参数n    
      fn: function (n) {
        return [
          // h1 标签的 render 函数
          e("h1", [t._v("footer 具名 + 作用域插槽")]), 
          // p 标签的 render 函数，这里可以看到编译后是：n.footerInfo.text
          e("p", [t._v(t._s(n.footerInfo.text))])
        ]
      }
    }
  ])
}

三、slot实现原理

1. 断点调试

为了方便大家看调试结果，当前项目的组件结构主要是这样，有三大层：

Vue -> <app></app> -> <my-slot></my-slot>

这里笔者在运行时代码 initRender()、renderSlot() 中，打上 debugger ，直接带大火看看执行流程。这里简单介绍下两个方法：

• initRender：获取 vm.$slot 。组件初始化时执行（比如执行到 my-slot组件 时，可从vm.$slot 获取父组件中的slot vNode，也就是我们的 默认插槽）

• renderSlot：把组件的 slot 替换成真正的 插槽vNode

接下来直接看实验截图：

1、先是进入initRender()（这里跳过初始化 大Vue、App 的过程）。直接到初始化 my-slot组件 过程。【 简单解释：由于 App组件 执行 render 得到 App组件vNode ，在 patch 过程中 遇到 vue-component-my-slot 的 vNode ，又执行 my-slot组件 的 初始化流程。不是很熟悉组件化流程的朋友可以去看看笔者的Vue响应式原理～】

• 我们不难发现，图中此时正值 my-slot组件 的 init 阶段。

• 再往下执行，我们可以得到 App组件中的 <h1>默认插槽</h1> 的vNode，赋值给 vm.$slot（这里我们记住，默认插槽的 vNode 已经得到）

2. Masukkan renderSlot() sekali lagi. Kemudian teruskan pelaksanaan satu langkah di atas dan anda akan mencapai renderSlot. Pada masa ini, ia telah memasuki peringkat my-slot组件 render. Mengimbas kembali pada langkah pertama, pada masa ini kita mempunyai vNode dalam slot lalai, dan ia wujud dalam vm.$slot.default

slot pengepala

Pergi mengikut urutan, mula-mula tunjukkan vNode pengepala kedudukan pertama. Seperti yang ditunjukkan dalam rajah, kita akan mencapai titik putus, dan kemudian kita akan satu langkah

untuk terus memasuki pelaksanaan fungsi render bagi slot pengepala kami. Mengikut langkah penyahpepijatan,
• kita boleh memastikan bahawa fungsi pemaparan yang diletakkan dalam dilaksanakan apabila subkomponen membuat scopedSlots属性

Dapatkan vNode slot pengepala

Slot lalai

Teruskan satu langkah, Kali ini giliran slot lalai! Seperti yang ditunjukkan dalam gambar,
• di sini betul-betul key. Ia boleh didapati bahawa 'default' tidak melaksanakan pemaparan seperti slot pengepala di atas, tetapi secara langsung mengembalikan slot vNode yang kami dapat sebelum ini.

Dapatkan vNode slot lalai

Slot skop

Bahagian hadapan adalah sama dengan slot pengepala, dan pemaparan slot akan dilaksanakan dalam komponen slot saya. Mari melangkah terus untuk membuat untuk melihat perbezaannya. Dapat disimpulkan di sini bahawa parameter yang dihantar pada fungsi
• adalah tepat data subkomponen kami my-slot, itulah sebabnya kami boleh mengakses data subkomponen melalui data dalam App组件作用域插槽

• Akhirnya, ia mengembalikan vNod slot pengaki. Okay, proses pengesahan sudah selesai~

2 Ringkaskan prinsip pelaksanaan slot

Malah, proses di atas hanyalah proses demonstrasi, dan anda tidak melakukannya. terpaksa terjebak di dalamnya. Penulis di sini secara langsung meringkaskan kesimpulan untuk semua orang berdasarkan proses praktikal! Maksudnya, kita perlu kembali kepada tiga soalan yang kita ajukan pada mulanya!

1. Pada peringkat manakah vNod slot biasa dan slot skop dijana semasa memaparkan komponen induk atau komponen anak?

• Slot lalai , tidak kira bagaimana atau v2.5 ditulis, v2.6 dijana dalam komponen induk. vNode wujud dalam vNode. Apabila komponen anak vm.$slot mencapai slot, render akan mendapat terus komponen induk vNode

• dua slot bernama Versi berbeza-beza. Mengikut keputusan kompilasi, dapat dilihat bahawa:

  • ditulis dengan cara yang sama seperti slot lalai vNode dijana dalam komponen induk, dan komponen anak menggunakannya secara langsung v2.5

  • ,

    dilaksanakan terus dalam subkomponen untuk menjana v2.6. 插槽render插槽vNode

• Slot skop

  . Tidak kira versinya, dipaparkan dalam komponen anak .

Anda mungkin memahaminya dengan cara ini selepas templat disusun, selagi slot diletakkan dalam atribut
• scopeSlots

  , ia hanya akan berlaku apabila. sub-komponen melaksanakan render.

2. Slot Skop Mengapakah data komponen anak boleh diakses daripada komponen induk?

Slot skop

Hanya apabila subkomponen dipaparkan
• , pemaparan akan dilaksanakan untuk menjana vNode. Selain itu, fungsi pemaparan slot skop boleh menerima parameter untuk mendapatkan data subkomponen . Beginilah cara slot skop terbentuk! Jadi kita boleh mengakses data komponen anak dalam komponen induk.
3. Adakah terdapat perbezaan dalam pelaksanaan antara slot biasa dan slot skop?

Ada perbezaan.

• • Slot biasa

    . Jika ia , kedua-dua slot yang dinamakan dan slot lalai hanya akan menjana vNode apabila komponen induk membuat Apabila komponen anak ingin membuat slot, ia secara langsung memperoleh data yang sudah menjadi vNode dalam $slot. contoh komponen induk.

  • Slot biasa. Jika ia v2.6, walaupun slot yang dinamakan melaksanakan pemaparan dalam komponen anak, tidak menerima parameter .

  • Slot skop. Tidak kira v2.5 atau v2.6, render hanya akan dilaksanakan pada subkomponen dan boleh menerima parameter .

Baiklah, mari kita berikan ringkasan ringkas di penghujung. Slot skop mesti ditangguhkan dan menerima parameter! Slot biasa boleh dilaksanakan secara tertunda atau secara langsung, tetapi tidak menerima parameter!

---

Ditulis pada akhirnya, banyak kali kami melakukan kerja keras dan mengikuti dokumentasi untuk melaksanakan fungsi, yang benar-benar menjimatkan usaha dan kebimbangan ~ tetapi apabila anda melakukannya terlalu banyak, anda akan mendapati bahawa perkara semasa tidak mempunyai cabaran dan membosankan. Pada masa ini, akan ada dorongan untuk mendalami prinsip pelaksanaannya dan melihat bagaimana slot dilaksanakan. Terutamanya slot berskop. Apabila menggunakannya, anda akan mengambil mudah bahawa komponen peringkat atas harus mendapatkan data sub-komponen melalui slot skop Namun, selepas menggali kod sumber dan memahami cara orang lain melakukannya, anda akan tiba-tiba berasa tercerahkan ~

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari kita bincangkan tentang prinsip Vue.slot dan mari kita terokai cara slot dilaksanakan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!