Vue で v-slot デフォルトスロットを使用する方法

<p>Vue は、開発をより良くするための多くの指示を提供する人気のあるフロントエンド フレームワークです。中でも v-slot は非常に重要な命令であり、コンポーネントをより柔軟に組み合わせ、コードの可読性と再利用性を向上させることができます。

<p>デフォルトのスロットは v-slot のスロット タイプです。デフォルトのスロットを使用すると、親コンポーネントの HTML 構造を子コンポーネントに渡すことができるため、子コンポーネントはそれを独自の子として使用できます。要素のレンダリング。この記事では、Vue の v-slot デフォルトスロットの使い方を詳しく紹介します。

デフォルト スロットの構文

<p>まず、デフォルト スロットの基本構文を見てみましょう:

<template>
  <div>
    <slot></slot>
  </div>
</template>

<p>上記のコードは、次の内容を含む単純なコンポーネントを定義します。デフォルトのスロット。このコンポーネントを使用する場合、任意の HTML 構造をコンポーネント タグ内に配置でき、これらの HTML 構造はコンポーネント内の <slot></slot> タグに渡され、順番にレンダリングされます。それはアウトです。

<my-component>
  <p>Hello, world!</p>
</my-component>

<p>上記のコードは、<my-component> タグ内に <p> タグを追加します。この <p> タグはコンポーネント内の <slot></slot> タグに渡されてレンダリングされます。

名前付きスロット

<p>コンポーネントで複数のスロットを使用する場合、すべてがデフォルトのスロットを使用すると、これらのスロットは順番にレンダリングされ、この状況ではコードが乱雑になる可能性があります。これを回避するには、名前付きスロットを使用します。

<p>名前付きスロットとデフォルト スロットの違いは、名前付きスロットを使用する場合、スロットに名前を付け、HTML 構造を渡すときにこの名前を指定する必要があることです。名前付きスロットを使用するコンポーネントの例を次に示します。

<template>
  <div>
    <slot name="header"></slot>
    <div>
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<p>上記のコードは 3 つのスロットを定義します。ここで、name="header" と name="footer" は名前付きスロット。name 属性のない <slot></slot> ラベルはデフォルトのスロットです。このコンポーネントを使用する場合、v-slot ディレクティブを使用してスロットのコンテンツを指定し、HTML 構造をこのスロットに渡すことができます。

<my-component>
  <template v-slot:header>
    <h1>This is the header</h1>
  </template>
  <p>Hello, world!</p>
  <template v-slot:footer>
    <footer>Footer</footer>
  </template>
</my-component>

<p>上記のコードは、v-slot ディレクティブを使用して 3 つのスロットの内容を指定しています。名前付きスロットを使用すると、コンポーネントの可読性と保守性が大幅に向上することがわかります。

省略構文

<p>コードをさらに簡素化するために、Vue 2.6.0 では省略構文が導入されました:

<template>
  <div>
    <slot name="header"></slot>
    <div>
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<my-component>
  
  <p>Hello, world!

  

<p>ご覧のとおり、# を使用できます。 v-slot: の代わりに、v-slot:name を #name に短縮します。これにより、コードの作成が容易になります。

概要

<p>デフォルトのスロットを使用するとコンポーネントで HTML 構造を渡すことができ、名前付きスロットを使用するとコードが読みやすく保守しやすくなり、短縮構文を使用するとコードの作成が容易になります。 v-slot の使用をマスターすると、コードをより柔軟に編成でき、プロジェクト開発の効率とコードの品質を向上させることができます。

以上がVue で v-slot デフォルトスロットを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。