VUE3 クイックスタート: スロット分散のためのスロットの使用-Vue.js-php.cn

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

PHPz

リリース： 2023-06-16 11:12:12

オリジナル

1365 人が閲覧しました

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

1. スロット配布とは

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

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

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

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

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. スロットを使用するための高度なテクニック

デフォルトスロット

デフォルトスロットは、指定された名前のないスロットを指します。親スロットを置き換えます。スロット。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>

ログイン後にコピー

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>

ログイン後にコピー

スコープスロット

スコープスロットは、次のことができる方法です。コンテキストデータを他の 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 サイトの他の関連記事を参照してください。