VUE3 クイック スタート: スロット分散のためのスロットの使用

Vue3 は非常に人気のある JavaScript フレームワークであり、その使いやすさと柔軟性により人気があります。 Vue3 では、スロット分散にスロットを使用することで、コンポーネントをより柔軟にカスタマイズできます。この記事では、スロット配布にスロットを使用し、Vue3 をすぐに始める方法を紹介します。

1. スロット配布とは

スロット配布は Vue3 のコンポーネントの組み込み機能であり、ユーザーはコンポーネントを通じてあらゆる種類のコンテンツを渡し、さまざまなレベルのレンダリングを実現できます。コンポーネント内で。つまり、スロット配布はコンポーネントに適用され、次の方法でコンポーネントのコンテンツを配布できるようになります。ユーザーは、コンポーネントの実装の詳細を知らなくても、Vue3 コンポーネントのスロットの場所にコンテンツを挿入できます。スロット分散を使用すると、開発者はコンポーネントのプレゼンテーションと対話動作をより柔軟に制御できます。

2. スロット分散の使用方法

まず、スロット分散を使用する前に、Vue3 コンポーネントを定義する必要があります。タイトルとテキストを含むページを実装する必要があるとします。スロット分散を使用すると、次の機能を実現できます:

1. ユーザーはタイトルとテキストの位置を定義できます。
2. テキストのデフォルトの位置はタイトルの下です。

Vue3 コンポーネントを定義するコードは次のとおりです:

<template>
    <div>
        <h1>组件名称</h1>
        <slot name="caption"></slot>
        <p>默认文本</p>
        <slot name="text"></slot>
    </div>
</template>

上記のコードでは、「コンポーネント名」という名前のタイトルを定義し、2 つのタイプを使用します。スロット。 1 つのスロット タグは「caption」という名前のスロットの場所を指し、もう 1 つのスロット タグは「text」という名前のスロットの場所を指します。

次に、このコンポーネントを使用し、スロット タグのコンテンツを提供することで、スロットの配布を行うことができます。例:

<template>
    <div>
        <MyComponent>
            <template v-slot:caption>
                <h2>自定义标题</h2>
            </template>
            <template v-slot:text>
                <p>文本内容</p>
            </template>
        </MyComponent>
    </div>
</template>

上記のコードでは、「I am a caption」と「I am a text」を上記のコンポーネントのスロット タグにそれぞれ割り当てました。

3. スロットを使用するための高度なテクニック

1. デフォルト スロット

デフォルト スロットは、指定された名前のないスロットを指します。親スロットを置き換えます。スロット。Vue3 コンポーネントが子コンポーネントに渡すものはすべて、この場所に渡されます。たとえば、コンポーネントにデフォルトのスロットを適用するには、マークアップにコンテンツを含めます。コード例は次のとおりです。

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

これにより、アドレスがコンポーネント内のすべてに渡されます。たとえば、次のコードのようになります。

<template>
    <div>
        <MyComponent>
            <p>文本内容</p>
            <h2>自定义标题</h2>
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
            </ul>
        </MyComponent>
    </div>
</template>

2. Named Slot

名前付きスロット スロットは、名前でコンテンツを指定できるスロットです。デフォルトのスロットでは、指定しない限りデフォルトの名前が使用されます。同じコンポーネント内で複数のスロットを使用し、その名前に基づいて特定のスロットを選択するには、名前付きスロットを使用します。たとえば、コンポーネントで名前付きスロットを使用するには、スロット タグに「name」属性を追加します。サンプル コードは次のとおりです。

<template>
    <div>
        <h1>组件名称</h1>
        <slot name="header"></slot>
        <p>默认文本</p>
        <slot name="footer"></slot>
    </div>
</template>

これにより、アプリケーションで子コンポーネントを割り当てるときに、次のように割り当てることができます。名前に基づくスロット 位置はデータの内容に対応します。サンプルコードは次のとおりです。

<template>
    <div>
        <MyComponent>
            <template v-slot:header>
                <h2>自定义标题</h2>
            </template>
            <template v-slot:footer>
                <h4>自定义页脚</h4>
            </template>
        </MyComponent>
    </div>
</template>

3. スコープスロット

スコープスロットは、次のことができる方法です。コンテキスト データを他の Vue3 コンポーネントのスロットに渡します。たとえば、コンポーネントでスコープ付きスロットを使用するには、「slot-scope」などのパラメーターをスロット タグに追加します。サンプル コードは次のとおりです。

<template>
    <div>
        <ul>
            <li v-for="{{ menuItem in menuItems }}">
                <slot name="item" v-bind="menuItem"></slot>
            </li>
        </ul>
    </div>
</template>

次に、子コンポーネントを割り当てるときに、次のようにテンプレートに「item」という名前のスロットを追加できます。

<template>
    <div>
        <Menu>
            <template v-slot:item="menuItem">
                <li>{{ menuItem.text }}</li>
            </template>
        </Menu>
    </div>
</template>

上記の例では、「menuItem」 " は、コンポーネントとともに渡されるすべてのデータを含む、スロットに渡されるコンテキスト オブジェクトです。 「menuItem.text」などの名前で単一のプロパティを参照できます。

概要

Vue3 では、スロット分散を使用することで、ユーザーがコンポーネントをより柔軟にカスタマイズできるようになります。強力なカスタマイズは、デフォルト スロット、名前付きスロット、およびスコープ スロットという 3 つのスロット分散方法を使用して実現できます。この記事では、スロット分散の使用方法と、スロットを使用するための高度なテクニックについて詳しく説明します。Vue3 をすぐに使い始めて、動的で柔軟な Web アプリケーションの構築を始めるのに役立つことを願っています。

以上がVUE3 クイック スタート: スロット分散のためのスロットの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。