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 をよろしくお願いいたします。

以下もご興味があるかもしれません: