Vueスロットの包括的なガイド-jsチュートリアル-php.cn

A Comprehensive Guide to Vue Slots

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

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

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

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

キーポイント

スロットの実用的なアプリケーション：Vueスロットは静的コンテンツに限定されませんが、完全なテンプレートまたはインタラクティブな関数を提供するために使用することもできます。
最高のコンポーネントデザインのための小道具付きスロットを使用：ベストプラクティスは、コンテンツ管理にスロットを使用し、コンポーネント内のデータ処理にプロップを使用して、コンポーネントをより効率的かつ明確にすることができます。

基本的なスロット使用

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

const app = Vue.createApp({})

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

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

const app = Vue.createApp({})

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

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

ログイン後にコピー

この例では、コンテンツが同じままになるタイトルを作成し、その日の引用に基づいてコンテンツが変更されるスロットコンポーネントを段落に配置します。コンポーネントをレンダリングすると、VueはQuoteコンポーネントからタイトルを表示し、その後、引用タグ内に入れたコンテンツが表示されます。また、引用の作成と実装で使用される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;
}

ログイン後にコピー

複数のスロットを使用しています

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

基本的なカードコンポーネントを構築します

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

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

const app = Vue.createApp({})

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

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

ログイン後にコピー

カードコンポーネントを使用する場合、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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Save</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Edit</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Delete</a>
    </template>
  </card>
</div>

ログイン後にコピー

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

以上がVueスロットの包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。