Vue でスロットを使用する方法についての簡単な説明

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:

コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、スロットタグの途中で定義できます。スロットタグが name 属性値を宣言していない場合、スロットを使用するときにデフォルトで最初のスロットから下に配置されます。使いやすさのために、スロットには一般的に name 属性値が指定されています。スロットを使用する場合は、使用したいタグに slot='slot name' を追加するだけで、指定したタグを指定したスロットに配置することができます。スロットは任意のコンテンツにすることができます。

例:

<!DOCTYPE html>

<html lang="ja">

<ヘッド>

    <メタ文字セット="UTF-8">

    <meta http-equiv="X-UA-compatible" content="IE=edge">

    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

    <title>スロット練習</title>

    <script src="../../js/vue.js"></script>

</head>

<本文>

    <div id="アプリ">

        <div style="border: 7px solid blueviolet;">

            <h2>親コンポーネント</h2>

            <cpn>

                <!-- 指定されたスロット位置に要素を追加します -->

                <button slot="left">ボタン</button>

                <input type="text" slot="right" placeholder="これは入力ボックスです..."></input>

            </cpn>

        </div>

    </div>

    <テンプレート lang="" id="cpn">

        <div style="border: 6px solid green;">

            <h2>サブコンポーネント</h2>

            <!-- サブコンポーネントに 3 つのスロットを定義し、スロットの値はデフォルト値です -->

            <slot name="left">左</slot>

            <slot name="mediate">中</slot>

            <slot name="right">右</slot>

        </div>

    </テンプレート>

    <スクリプト>

        新しいVue({

            el:'#app',

            コンポーネント:{

                cpn:{

                    テンプレート:'#cpn',

                }

            }

        })

    </スクリプト>

</本文>

</html>

効果は以下のようになります。

分析:

上記の例では、子コンポーネントに 3 つのスロットが定義され、特定の name 属性値が与えられています。親コンポーネントが子コンポーネントを呼び出すと、子コンポーネントの left という名前のスロットにボタンが配置され、right という名前のスロットに入力ボックスが配置されます。このことから、スロットを使用することで、コンポーネントにさらに多くの拡張機能を持たせることができることがわかります。スロットの内容は何でもかまいません。スロットを定義することは、事前にコンポーネント用の穴を掘っておき、後で使用するときにそれを呼び出すことと同じです。


Vue のスロットの使い方に関する記事はこれで終わりです。Vue のスロットの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue スコープ スロットの詳細、スロット、v-slot、slot-scope
  • Vueのスロット配信コンテンツ(複数配信)について
  • Vue2のスロットの基本的な使用仕様
  • Vueスロットの詳細な説明
  • Vue でのスロットの使用に関する詳細な説明

<<:  初心者のためのWebサイト構築入門 ③ エイリアス(CNAME)レコードとURL転送

>>:  CSSのoutline-offsetプロパティを使用してプラス記号を実装する

推薦する

JavaScript セレクター関数 querySelector および querySelectorAll

目次1. querySelectorは単一の要素を照会する1. ドキュメントインスタンスの呼び出し2...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

MySQL 8.0.3 RCがリリースされようとしています。変更点を見てみましょう。

MySQL 8.0.3がリリースされます。新機能を見てみましょうMySQL 8.0.3 は RC ...

Unicode の数学記号の概要

数学、物理学、および一部の科学技術分野で使用される特殊記号は多数あります。Unicode コードには...

レスポンシブレイアウトの概要(推奨)

レスポンシブレイアウト開発の基礎知識この章は主に以下の部分に分かれています• レスポンシブデザインを...

Nginx コンパイル済み nginx - 新しいモジュールを追加

1. 既存のモジュールを表示する nginx の sbin ディレクトリに nginx の sbin...

Nginx Rewrite の使用シナリオとコード例の詳細な説明

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

よくある Linux 英語エラーの中国語翻訳 (初心者必見)

1.コマンドが見つかりません コマンドが見つかりません2. そのようなファイルまたはディレクトリは...

XHTML の一般的な構造タグ

構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...

MySQL のジオメトリ型を使用して経度と緯度の距離の問題を処理する方法

テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...

httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...

Nginx リバース プロキシから go-fastdfs へのケースの説明

背景go-fastdfs は、http プロトコルをサポートする分散ファイルシステムです。一般的なプ...

docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装

目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...