スロット (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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
ステートフック例: 'react' から useState をインポートします。 関...
1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...
1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...
皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...
序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...
目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...
Linux 仮想マシン: VMware + Ubuntu 16.04.4 Windows ネイティブ...
iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使...
下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...
<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...
前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...
この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...
競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...
デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...