Vueのスロットの詳細な説明

Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロットが提供されます。

スロット分類

デフォルトスロット

名前付きスロット

スコープ付きスロット

コンポーネントに HTML タグを挿入するだけの場合は、デフォルトのスロットを使用できます。

複数ある場合は、最初のスロットに名前を付けて、どのスロットに挿入するかを決定する必要があります。

スロット内のコンポーネントのデータを使用したい場合は、スコープ付きスロットを使用できます。

以下はデフォルトスロットの使用法を示しています

使用する場合

上記はデフォルトのスロットの使用です

名前付きスロットとは、コンポーネント内に1つ以上のスロットを定義し、どのスロットがそれに作用するかを区別するために、スロットに名前を付けることを意味します。

使用する場合

ここで、Vue 2.6 バージョンには、テンプレート タグを使用する新しいスロット記述方法があることを述べたいと思います。テンプレートは単なるラッピング タグであり、実際のページにはレンダリングされないことはご存じでしょう。スロット記述の新しい方法はそれを使用します。以下に示すように、それなしでは十分ではありません。

スコープ付きスロットについてお話しましょう。

上記の 2 つのスロットによって表示されるデータを見てみましょう。これらはすべて、スロットのユーザーである About コンポーネントのデータに配置されています。

しかし、場合によっては、ユーザーはこれらのデータを気にせず、カテゴリ コンポーネント自体からデータが取得されることがあります。

ユーザーは、スロット内のコンテンツの表示を管理するだけで済みます。

ここでスコープ付きスロットが役に立ちます

上の図では、スコープスロットで2つのデータがユーザーに渡されていることがわかります。

ユーザーはどのように受け取りましたか?

上記はVueで使用される3種類のスロットです

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。