ホームページ > 記事 > ウェブフロントエンド > Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

青灯夜游転載: 2022-05-10 11:55:032872ブラウズ

この記事では、Vue に関する辛口な情報と、あなたが知らないかもしれない Vue.slot の原理についてお話します。皆様のお役に立てれば幸いです。

日々のビジネス開発でも、基本コンポーネントのカプセル化でも、 スロットスロット は私たちの視野に頻繁に現れると思います。これはプログラミングの実装に非常に便利です。おそらく誰もが slot の使用法に精通しているでしょう。名前付きスロット、または スコープスロットのさまざまな使用方法など... slot と slot-scope のレイヤーは実装されていますか?

わかりやすい、の Vue.slot を 10 分で削除できます ソースコード実装分析＃＃＃！！！著者に従って、Vue (v2.6.14) のスロット slot がどのように実装されているかを調べてください。！この記事では主に 2 つの部分で説明します。

通常のスロット (名前付きスロット、デフォルトスロット)
スコープスロット

この記事には、あいまいなソースコード分析はなく、専門用語で直接説明されているため、Vue ソースコードにどれほど精通していても理解できます。オンサイトのデバッグを通じて、

Vue の slot がどのように実装されているかを明確に確認できます。行こう行こう！ (学習ビデオ共有: vue ビデオチュートリアル )

slot `の使用法を確認する`

まず、スロットの一般的な使用法を確認します。ここでの

slot の使用法では、新しい標準の 2.6.0 を使用します (この記事では、v2.5 と v2.6 の書き方についても説明します) ソースコード実装の違いは何ですか!)。

使用方法について詳しく知りたい場合は、公式 Web サイトにアクセスして Vue のスロットのドキュメントを詳しく読んでください。
https://cn.vuejs.org/v2/ guide/components-slots.html

1. デフォルトのスロット

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

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

ページ表示効果は図に示すとおりです:

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

2. 名前付きスロット

上記の例に従って、名前付きスロット

header を追加します。コードは次のとおりです:

<!-- 子组件 -->
<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>

上記のコードブロックは次のとおりです。 : サブコンポーネント内の

slot タグ には name という名前の属性が含まれており、値は header##親コンポーネントの
#template タグ
には属性 v-slot があり、値は header

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。 3. スコープスロット (slot-scope)

上記に従うこの場合、スコープスロット

footer

を追加します。コードは次のとおりです。<pre class="brush:js;toolbar:false;"> <template> <div class="wrapper">  <header class="header"> <slot name="header"></slot> </header>  <div class="main"> <slot></slot> </div>  <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></pre>上記のコードブロックは次のとおりです。

サブコンポーネント内のスロットタグ
name=footer 属性を除き、:footerInfo="footerInfo" 属性もあります (その機能は子コンポーネントデータを渡すことです)#親コンポーネントの
v-slot:footer だけでなく、代入操作 ="slotProps "。テンプレートの二重括弧構文で、サブの footerInfo ページにアクセスした後、
slotProps

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。さて、簡単なレビューです。使用を終えた後、作成者はここで 3 つの質問をします。

通常スロットとスコープスロットの vNode はどの段階で生成されますか? 親コンポーネントまたは子コンポーネントをレンダリングするとき?

通常のスロットとスコープスロットでは実装に違いはありますか?
質問をしながら読み進めましょう。

2. さまざまな

slot

`のコンパイルの違い上記の最後のケースコードに基づいて、パッケージ化コマンドを実行して、テンプレートのコンパイル時に Vue がそれをどのように処理するかを確認します。私たちの` スロット

です!これ以上面倒なことはせずに、急いで

build~ (みんなに内緒で言っておきますが、Vue は スコープスロット と 通常スロット を処理します。違いはコンパイルから始まります、つまり、レンダリング関数が異なります） ここでは、v2.5

の名前付きスロットの書き込みメソッドを使用して参考にします（名前付きスロットのヘッダーを書き換えるには、

slot="header" を使用してください)、v2.6、v2.5 の記述と実装を確認できます。違いは~難しくありません。とにかく、見てみるために取り出してみました

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

上图左边是 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 阶段。

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

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

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

2. 次に、renderSlot() と入力します。次に、上記のシングルステップの実行を続けると、renderSlot に到達します。現時点では、my-slot コンポーネント の render ステージに入っています。最初のステップを振り返ると、この時点では デフォルトスロットの vNode があり、vm.$slot.default には

ヘッダースロットがあります。

順番に進み、まず最初にランク付けされたヘッダーの vNode をレンダリングします。図に示すように、ブレークポイントに到達し、

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

ヘッダースロットのレンダリング関数の実行に直接進みます。。デバッグ手順によると、 サブコンポーネントのレンダリング時に scopedSlots 属性 に配置されたレンダリング関数が実行されることが確認できます。

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

##デフォルトスロット

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。続き単一ステップ、今度はデフォルトスロットの番です!図に示すように、ここの

key

は正確に 'default' です。

は上記のヘッダースロットのようにレンダリングを実行せず、前に取得したスロット vNode を直接返していることがわかります。

#デフォルトスロットの vNode を取得します

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

フロントはヘッダースロットと同じであり、スロットのレンダリングは my-slot コンポーネントで実行されます。違いを確認するために、直接レンダリングに進んでみましょう。ここで、 1Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。 function で渡されたパラメータは、サブコンポーネント

my-slot

の data データであると結論付けることができます。そのため、

App を使用します。コンポーネント

scope スロットを介してサブコンポーネントデータにアクセスできる理由##最後に、フッタースロットの vNode も返します。さて、検証プロセスは終了しました~

2. スロット実装の原則を要約します 1Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

実際、上記のプロセスは単なるデモンストレーションプロセスであり、実際にはそうではありません。それに囚われなければなりません。ここでは著者が実際のプロセスに基づいて結論を直接まとめています。つまり、最初に尋ねた 3 つの質問に戻らなければなりません。

1. 通常スロットとスコープスロットの vNode はどの段階で生成されますか? 親コンポーネントまたは子コンポーネントをレンダリングするとき?

デフォルトのスロット

は、

v2.5

と

v2.6

の記述方法に関係なく、親にあります。コンポーネント

はで生成されます。
vNode は vm.$slot に存在します。子コンポーネント render がスロットに到達すると、 は親の vNode を直接取得します。名前付きスロット状況は 2 つのバージョン間で異なります。コンパイル結果によると、
はデフォルトのスロットと同じように記述されており、親に vNode が生成されていることがわかります。コンポーネントであり、子コンポーネントによって直接使用されます
- 、
  スロットレンダー はサブコンポーネント内で直接実行され、## を生成します# スロット vNode。
- スコープスロット。バージョンに関係なく、 はサブコンポーネント でレンダリングされます。
scopeSlots 属性
に配置されたスロットである限り、テンプレートはコンパイルされません。サブコンポーネントが render を実行するまで使用されます。vNode を生成します。 2. スコープスロット親コンポーネントから子コンポーネントのデータにアクセスできるのはなぜですか?
スコープスロット
サブコンポーネントがレンダリングされる場合のみ、レンダリングが実行されて vNode が生成されます。さらに、スコープスロットのレンダー関数 はパラメータを受け取り、サブコンポーネントのデータ
を取得できます。スコープスロットはこうして形成される！したがって、親コンポーネント内の子コンポーネントのデータにアクセスできます。

3. 通常のスロットとスコープスロットで実装に違いはありますか? ＃＃＃＃＃＃＃＃＃違いがあります。

通常スロット。 v2.5 の場合、名前付きスロットとデフォルトスロットの両方は、親コンポーネントがレンダリングするときにのみ vNode を生成します。子コンポーネントがスロットをレンダリングしたい場合は、$slot から直接取得されます。親コンポーネントインスタンスの vNode データ。
通常スロット。 v2.6 の場合、名前付きスロットは子コンポーネントで render を実行しますが、 パラメーターを受け取りません。
スコープスロット。
v2.5 または v2.6 に関係なく、レンダリングはサブコンポーネント内でのみ実行され、パラメータ を受け取ることができます。

さて、最後に簡潔にまとめましょう。

スコープスロットは遅延してパラメーターを受け取る必要があります。通常のスロットは遅延または直接実行できますが、パラメータは受け取りません。

最後に書いてあるように、レンガをコピーしてドキュメントに従って機能を実装することが多いので、本当に省力化できて安心です～でも、やりすぎると、あなたは、現在のものには挑戦が欠けていて退屈であると気づくでしょう。この時点で、その実装原理を詳しく調べて、

slot がどのように実装されているかを確認したいという衝動が生じます。特に スコープスロット。使っていると、上位コンポーネントがスコープスロットを通じてサブコンポーネントのデータを取得するのが当たり前だと思ってしまいますが、ソースコードを掘り下げて他の人がどのようにやっているのかを理解すると、突然啓発された気分になります。 ~

(学習ビデオ共有:

Web フロントエンド開発、基本プログラミングビデオ)

以上がVue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

封装 function 作用域 default https

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Vue コマンドの修飾子、一般的なイベント修飾子の概要について説明します。次の記事：Vue コマンドの修飾子、一般的なイベント修飾子の概要について説明します。

続きを見る

Vue.slot の原理について話して、スロットがどのように実装されているかを見てみましょう。

slot の使用法を確認する

<template> <div class="wrapper">  <div class="main"> <slot></slot> </div> </template>  <my-slot> <template> <h1>默认插槽</h1> </template> </my-slot>

上記に従うこの場合、スコープ スロット

のコンパイルの違い 上記の最後のケース コードに基づいて、パッケージ化コマンドを実行して、テンプレートのコンパイル時に Vue がそれをどのように処理するかを確認します。私たちの スロット

三、slot实现原理

1. 断点调试

デフォルトのスロット

関連記事

slot `の使用法を確認する`

上記に従うこの場合、スコープスロット

`のコンパイルの違い上記の最後のケースコードに基づいて、パッケージ化コマンドを実行して、テンプレートのコンパイル時に Vue がそれをどのように処理するかを確認します。私たちの` スロット

三、`slot`实现原理