Vue の匿名スロットと名前付きスロットの詳細な説明

Vue の匿名スロットと名前付きスロットの詳細な説明

スロット (slot) は、Vue のコンテンツ配布メカニズムです。コンポーネント内のテンプレート エンジンは、配布されたコンテンツを運ぶための出口としてスロット要素を使用します。

スロットは子コンポーネントのテンプレート タグ要素であり、このタグ要素が表示されるかどうか、またどのように表示されるかは親コンポーネントによって決定されます。

スロットは、デフォルト スロット、名前付きスロット、スコープ スロットの 3 つのカテゴリに分けられます。 (ここでは最初の 2 つについてお話します)

スロットの本質は、スロットは本質的にサブコンポーネントの拡張であり、コンテンツは <slot> スロットを通じてコン​​ポーネント内の「指定された場所」に配信されることです。

1. 匿名スロット

デフォルト スロット: 匿名スロットとも呼ばれ、スロットで名前属性値が指定されていない場合のデフォルトの表示スロットです。コンポーネントには匿名スロットが 1 つだけあります。

例:

まずVueインスタンスを作成し、idがappのdivにマウントします。

<div id="アプリ">
 
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
 
        // ルート コンポーネント (親コンポーネント、ベース コンポーネントとも呼ばれる)
        vm = new Vue({
            el:'#app',
        })
    </スクリプト>

ローカル コンポーネントを作成するときは、コンポーネント内のスロットを定義します。スロットは子コンポーネントに配置する必要があります。

 // ローカルコンポーネントを宣言する let child = {
            テンプレート:`
            <div>
                <p>私はサブコンポーネントです</p>
                <p>私は言葉の列です</p>
                <slot>これはプレースホルダーです</slot>
            </div>
            `
        }

VMインスタンスのサブコンポーネントセンターにローカルコンポーネントを定義し、ビューレイヤーにレンダリングします。

  // ルート コンポーネント (親コンポーネント、ベース コンポーネントとも呼ばれる)
        vm = new Vue({
            el:'#app',
 
            // サブコンポーネント(登録センター)
            コンポーネント:{
                // キーと値のペア。キーと値が同じ場合は子を省略できます
            }
        })
<div id="アプリ">
 
        <!-- コンポーネントの使用 -->
        <子></子>
    </div>

コンテンツが渡されない場合、スロットの (デフォルトの) コンテンツが表示されます。

ビューレイヤーのスロットにコンテンツを渡します。

 <!-- コンポーネントの使用 -->
        <子供>
            <h1 style="color: aqua;">これはコンテンツです</h1>
        </子>

コンテンツが渡されると、スロットの (デフォルトの) コンテンツは表示されません。

注: ビュー レイヤーのスロットにコンテンツを渡すには、子コンポーネントにスロットが存在している必要があります。そうでない場合は表示されません。

子コンポーネントに複数の匿名スロットがある場合、渡されたコンテンツは各スロットに個別に配置されます。

 テンプレート:`
            <div>
                <p>私はサブコンポーネントです</p>
                <p>私は言葉の列です</p>
                <slot>これはプレースホルダーです</slot>
                <スロット></スロット>
                <スロット></スロット>
            </div>
            `
<子供>
            <h1 style="color: aqua;">これが最初のコンテンツです</h1>
            <h1 style="color: red;">この 2 番目のコンテンツ</h1>
        </子>

2. 名前付きスロット

子コンポーネントでスロットを定義するときは、対応するスロットに名前を付けて、その後の親コンポーネントの挿入を容易にし、名前に従って対応するコンテンツを埋めます。

まず、子コンポーネントでスロットに名前を付けます (匿名スロットには実際にはデフォルト名 default がありますが、これは省略できます)。

 テンプレート:`
            <div>
                <p>私はサブコンポーネントです</p>
                <p>私は言葉の列です</p>
                <slot name="default">これはプレースホルダーです</slot>
                <slot name="t1">これは t1 プレースホルダーの内容です</slot>
                <slot name="t2">これは t2 プレースホルダーの内容です</slot>
                <slot name="t3">これは t3 プレースホルダーの内容です</slot>
                <slot name="t5">これはt4の内容です</slot>
            </div>
            `、

名前付きスロットを使用するメソッド

1. サブコンポーネント内のスロットを定義し、名前を付ける

2. 親コンポーネントのビューレイヤーのタグに、タグにスロット属性を追加します。

このプロパティには特定のスロットの名前を割り当てることができます

 <子供>
            <!-- この時点では、これら 2 つの文はまだ匿名スロットに配置されています -->
            <h1 style="color: aqua;">これが最初のコンテンツです</h1>
            <h1 style="color: red;">この 2 番目のコンテンツ</h1>
 
                <!-- slot="t1" はコンテンツを配置するスロットを指定します -->
            <h2 style="color: blue;" slot="t1">名前付きスロット t1 で使用したい</h2>
            <h3 style="color: green;" slot="t2">名前付きスロット t2 で使用したい</h3>
            <h4 style="color: orange;" slot="t3">t3 という名前のスロットに配置したい</h4>
            <h5 style="color: pink;" slot="t4">t4 という名前のスロットで使用したい</h5>
        </子>

要約する

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

以下もご興味があるかもしれません:
  • Vue デフォルトスロットの理解とサンプルコード
  • Vue 名前付きスロットの基本的な使用例
  • Vue はスロットを使用してコンテンツを配布します。操作例 [単一スロット、名前付きスロット、スコープ付きスロット]
  • Vue の匿名スロット、名前付きスロット、スコープ付きスロットの使い方の詳細な説明
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • VUE のコンパイル スコープとスロット スコープのスロットの問題について
  • Vueスコープスロットの実装方法と機能の詳しい説明
  • Vue のデフォルト スロット、名前付きスロット、スコープ スロットの定義と使用方法

<<:  CSSはインラインブロックのずれの問題を解決します

>>:  MySQL の不正な文字列値の解決方法

推薦する

Reactフック入門チュートリアル

ステートフック例: 'react' から useState をインポートします。 関...

WINDOWS での MYSQL のインストールに関する詳細なチュートリアル

1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

MySQL のインデックスにおける NULL の影響についての詳細な説明

序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...

Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション

目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使...

Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法

下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...

ベースリンクタグの使用の紹介ベース

<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

MySQL 学習ノート: 完全な SELECT ステートメントの使用例と詳細な説明

この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...