最新のWebアプリケーション開発のコアはコンポーネントです。各アプリケーションは、全體を形成するために連攜する複數(shù)のコンポーネントで構(gòu)成されています。さまざまなシナリオやさまざまなアプリケーションでも再利用するには、これらのコンポーネントが最大の柔軟性と再利用性を持つ必要があります。多くのフレームワーク（特にVUE）は、「スロット」と呼ばれるメカニズムを使用して、これらのニーズを満たしています。

スロットは、強(qiáng)力で多用途のコンテンツ分布と組み合わせメカニズムです。スロットは、さまざまな場(chǎng)所やさまざまなユースケースで使用できるカスタマイズ可能なテンプレート（PHPテンプレートと同様）と考えることができます。たとえば、VuetifyのようなUIフレームワークでは、スロットを使用して、アラートコンポーネントなどの一般的なコンポーネントを作成します。これらのコンポーネントでは、スロットはデフォルトのコンテンツおよび追加/オプションのコンテンツ（アイコン、畫像など）のプレースホルダーとして機(jī)能します。

スロットを使用すると、特定のコンポーネントに構(gòu)造、スタイル、機(jī)能を追加できます。スロットを使用することにより、開発者は単一のコンポーネントで使用されるプロップの數(shù)を大幅に減らし、コンポーネントをより簡(jiǎn)単に管理しやすくすることができます。

このチュートリアルでは、VUE 3のスロットを活用する方法について説明します。始めましょう。

キーポイント

vueスロットはコンポーネントの柔軟性を向上させます：vue.jsのスロットは、コンポーネント內(nèi)のコンテンツの動(dòng)的配置を可能にし、非常に再利用可能で、さまざまなコンテキストに適応します。
基本スロットとスコープスロット：Vueには、基本スロットとスコープスロットの2種類のスロットがあります?；茎攻恁氓趣膝伐螗抓毪圣偿螗匹螗膜谓粨Qに使用されますが、スコープスロットによりサブコンポーネントデータへのアクセスが可能になり、より複雑でインタラクティブなコンテンツ統(tǒng)合が可能になります。
複數(shù)のスロットと名前付きスロットが構(gòu)造の複雑さを追加します。複數(shù)のコンテンツ領(lǐng)域を必要とするコンポーネントの場(chǎng)合、VUEは名前のスロットを含む複數(shù)のスロットをサポートします。
スロット対プロップ：プロップはデータをコンポーネントに渡すために重要ですが、スロットは複雑なコンテンツ構(gòu)造を管理し、コンテンツ配布のプロップの依存関係を削減するためのより柔軟なソリューションを提供します。
• スロットの実用的なアプリケーション：Vueスロットは靜的コンテンツに限定されませんが、完全なテンプレートまたはインタラクティブな関數(shù)を提供するために使用することもできます。
• 最高のコンポーネントデザインのための小道具付きスロットを使用：ベストプラクティスは、コンテンツ管理にスロットを使用し、コンポーネント內(nèi)のデータ処理にプロップを使用して、コンポーネントをより効率的かつ明確にすることができます。

基本的なスロット使用

Vueは主に2つのスロットを提供しています：シンプルなスロットとスコープスロット。簡(jiǎn)単なスロットから始めましょう。次の例を考えてみましょう：

const app = Vue.createApp({})

app.component('primary-button', {
  template: `
    <button>
      <slot>OK</slot>
    </button>
  `
})

app.mount('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

ここには、メインボタンコンポーネントがあります。ボタンテキストをカスタマイズ可能にするために、ボタン要素內(nèi)のスロットコンポーネントを使用してテキストプレースホルダーを追加します。カスタム値を提供しない場(chǎng)合は、デフォルト（フォールバック）共通値も必要です。 Vueは、デフォルトのスロットコンテンツとして、スロットコンポーネント內(nèi)に配置されたすべてを使用します。したがって、コンポーネント內(nèi)にテキスト「OK」を配置する必要があります。これで、次のようなコンポーネントを使用できます：

<div id="app">
  <primary-button></primary-button>
</div>

結(jié)果は、価値を提供しないため、テキスト「OK」のボタンです。しかし、カスタムテキストでボタンを作成したい場(chǎng)合はどうなりますか？この場(chǎng)合、次のようにコンポーネントの実裝でカスタムテキストを提供します。

<div id="app">
  <primary-button>Subscribe</primary-button>
</div>

ここで、Vueはカスタムテキスト「購(gòu)読」を取り、デフォルトのテキストの代わりに使用します。

ご覧のとおり、この簡(jiǎn)単な例でも、コンポーネントをレンダリングする方法で多くの柔軟性を獲得できます。しかし、これは氷山の一角にすぎません。より複雑な例を見てみましょう。

「日の文」コンポーネント を作成します

次に、毎日の文を表示するコンポーネントを構(gòu)築します。コードは次のとおりです

const app = Vue.createApp({})

app.component('quote', {
  template: `
    <div>
      <h2>The quote of the day says:</h2>
      <p>
        <slot></slot>
      </p>
    </div>
  `
})

app.mount('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

この例では、コンテンツが同じままになるタイトルを作成し、その日の引用に基づいてコンテンツが変更されるスロットコンポーネントを段落に配置します。コンポーネントをレンダリングすると、VueはQuoteコンポーネントからタイトルを表示し、その後、引用タグ內(nèi)に入れたコンテンツが表示されます。また、引用の作成と実裝で使用されるCSSクラスにも注意してください。必要に応じて、コンポーネントを2つの方法でスタイリングできます。

<div id="app">
  <quote>
    <div class="quote-box">
      <span class="quote-text">"Creativity is just connecting things."</span>
      <br>
      - Steve Jobs
    </div>
  </quote>
</div>

.quote-box {
  background-color: lightgreen;
  width: 300px;
  padding: 5px 10px;
}

.quote-text {
  font-style: italic;
}

複數(shù)のスロットを使用しています

単一のスロットは非常に強(qiáng)力ですが、多くの場(chǎng)合、これで十分ではありません。実際のシナリオでは、通常、ジョブを完了するために複數(shù)のスロットが必要です。幸いなことに、Vueは私たちが望むだけ多くのスロットを使用することを可能にします。シンプルなカードコンポーネントを構(gòu)築して、複數(shù)のスロットを使用する方法を見てみましょう。

基本的なカードコンポーネントを構(gòu)築します

3つの部分を持つカードコンポーネントを構(gòu)築します。

複數(shù)のスロットを使用するには、各スロットの名前を提供する必要があります。唯一の例外は、デフォルトのスロットです。したがって、上記の例では、ヘッダーとフッタースロットに名前屬性を追加します。名前を提供しないスロットは、デフォルトスロットと見なされます。

const app = Vue.createApp({})

app.component('card', {
  template: `
    <div>
      <slot name="header"></slot>
      <main>
        <slot></slot>
      </main>
      <slot name="footer"></slot>
    </div>`
})

app.mount('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

カードコンポーネントを使用する場(chǎng)合、v-slotディレクティブとスロット名でテンプレート要素を使用する必要があります：v-slot：[slot-name]。

<div id="app">
  <card>
    <template v-slot:header>
      <h2>Card Header Title</h2>
    </template>

    <template v-slot:default>
      <p>
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </p>
    </template>

    <template v-slot:footer>
      <a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Save</a> -
      <a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Edit</a> -
      <a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Delete</a>
    </template>
  </card>
</div>

（長(zhǎng)さが長(zhǎng)すぎるため、殘りの部分はここでは省略されています。必要に応じて、一部のコンテンツを選択的に保持または削除してください。）

以上がVueスロットの包括的なガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。