Vueはスロットとそのslot、slot-scope、v-slot命令の使用を理解する

スロットとは
Vue自体は、コンテンツ配信の出口、すなわちスロットとして要素を使用する完全なコンテンツ配信メカニズムを実現しています.スロット内のテンプレート、HTMLコード、およびコンポーネントがレンダリングされます.

<h1>
  <slot>slot>
h1>

<Child>
  <p>      p>
Child>

コンポーネント自体に要素が出口として存在しない場合、コンポーネントに含まれる内容は破棄されます.

<h1>h1>

<Child>
  
  <p>      p>
Child>

デフォルトスロット/匿名スロット(default slot)
上記の例では、nameプロパティは明示的に宣言されていません.デフォルトのスロットです.nameのプロパティ値はデフォルトで「default」です.スロットへのデータの転送時にスロット名が指定されていない場合は、デフォルトのスロットに転送されます.
名前付きスロット
名前付きスロットにはnameプロパティがあります.多くの場合、複数のスロットにコンテンツを転送する必要があります.この場合、名前付きスロットを使用する必要があります.
アクティブドメインスロット
親コンポーネントがスロット内の役割ドメインにアクセスする必要がある場合があります.この場合、役割ドメインスロット(v-slotおよびslot-scope)からスロットの役割ドメインオブジェクトにアクセスできます.これは、スロットで定義されたプロパティ値から構成されます.
スロットの既定値(バックアップ)

<h1>
  <slot>     slot>
h1>


<Child>
Child>


<Child>
  <p>     p>
Child>

slotとslot-scope(3.0バージョン以降に削除)は、vue-Vでvueバージョンを表示できます.
slotは、受信コンテンツのスロットをバインドするために使用され、slot-scopeはスロットの役割ドメインオブジェクトを取得します.
v-slot(2.6バージョン以降加入)
上記の2つの命令を組み合わせた新しい命令:

v-slot:slotName受信スロットをバインドし、#slotNameと略してslot="slotName"

に等しい

v-slot:slotName=「scope」で、スロットの役割ドメインオブジェクトを取得し、slot-scope=「scope」に等しいscopeに値を割り当てます.指定された特性v-slot=「{footer}」

もES 6の構文を使用して取得できます.

スロットがデフォルトスロットである場合、v-slotは修飾子を持たずにコンポーネント上で直接使用することができ、デフォルトスロットの役割ドメインをv-slot宣言変数

に割り当てることができる.

の最も重要な特性は、スロットコンポーネントを取得する役割ドメインオブジェクト

をコンポーネントに直接宣言できることである.
slot-scopeとv-slotの新しい古い命令の使用の対比
1.デフォルトのテキストスロット

<foo>
  <template slot-scope="{ msg }">
    {{ msg }}
  template>
foo>


<foo v-slot="{ msg }">
  {{ msg }}
foo>

2.デフォルト要素スロット

<foo>
  <div slot-scope="{ msg }">
    {{ msg }}
  div>
foo>


<foo v-slot="{ msg }">
  <div>
    {{ msg }}
  div>
foo>

3.ネストされたデフォルトスロット

<foo>
  <bar slot-scope="foo">
    <baz slot-scope="bar">
      <template slot-scope="baz">
        {{ foo }} {{ bar }} {{ baz }}
      template>
    baz>
  bar>
foo>


<foo v-slot="foo">
  <bar v-slot="bar">
    <baz v-slot="baz">
      {{ foo }} {{ bar }} {{ baz }}
    baz>
  bar>
foo>

4.名前付きスロット

<foo>
  <template slot="one" slot-scope="{ msg }">
    text slot: {{ msg }}
  template>

  <div slot="two" slot-scope="{ msg }">
    element slot: {{ msg }}
  div>
foo>


<foo>
  <template v-slot:one="{ msg }">
    text slot: {{ msg }}
  template>

  <template v-slot:two="{ msg }">
    <div>
      element slot: {{ msg }}
    div>
  template>
foo>

5.名前とデフォルトのブレンドネストスロット

<foo>
  <bar slot="one" slot-scope="one">
    <div slot-scope="bar">
      {{ one }} {{ bar }}
    div>
  bar>

  <bar slot="two" slot-scope="two">
    <div slot-scope="bar">
      {{ two }} {{ bar }}
    div>
  bar>
foo>


<foo>
  <template v-slot:one="one">
    <bar v-slot="bar">
      <div>{{ one }} {{ bar }}div>
    bar>
  template>

  <template v-slot:two="two">
    <bar v-slot="bar">
      <div>{{ two }} {{ bar }}div>
    bar>
  template>
foo>

リファレンス

RFCs

Vue.js-Slots(English)

Vue.js-スロット(中国語)