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

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

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

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

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

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

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

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

上記のコードは、b98f2d1b8b5d79f8c1b053de334aa7b5 タグ内に e388a4556c0f65e1904146cc1a846bee タグを追加します。この e388a4556c0f65e1904146cc1a846bee タグはコンポーネント内の 58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee タグに渡されてレンダリングされます。

名前付きスロット

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

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

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

上記のコードは 3 つのスロットを定義します。ここで、name="header" と name="footer" は名前付きスロット。name 属性のない 58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee ラベルはデフォルトのスロットです。このコンポーネントを使用する場合、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>

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

省略構文

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

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


  
  
Hello, world!
  

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

概要

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

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