スロットとは何ですか?Vue では、子コンポーネント タグの中央に何もラップできないことはわかっています。 しかし、コンポーネントを使用する場合、コンポーネントの外部のタグをカスタマイズしたいことがよくあります。Vue では、スコープ スロットと呼ばれるスロット メカニズムが追加されました。必要なバージョンは 2.1.0 以上です。 スロットは実際にはプレースホルダーです。これはコンポーネント内の HTML テンプレート内の場所を占め、何かを渡すことを可能にします。スロットは、匿名スロット、名前付きスロット、スコープ付きスロットに分けられます。 2.6.0 では、名前付きスロットとスコープ付きスロットの新しい統合構文 (v-slot ディレクティブ) が導入されました。スロットとスロットスコープを置き換えます 匿名スロット匿名スロット。単一スロットまたはデフォルト スロットとも呼ばれます。名前付きスロットと比較すると、name 属性を設定する必要がなく、非表示の name 属性がデフォルトになります。 父親.vue 子.vue 匿名スロットの場合、name 属性は default に対応し、空白のままにしてデフォルト値を使用することもできます。 使用時に注意すべき別の問題があります。匿名スロットが 2 つ以上ある場合、子タグの内容は各スロットで置き換えられます。 名前付きスロット (vue2.6.0 以降では slot='name' は非推奨)名前が示すように、スロットには名前が付けられます。定義: または、単純な略語を使用して #header を定義します。使用法: テンプレート タグで囲みます。 父親.vue 子.vue ここでは、複数の名前付きスロットの使用について説明します。スロットの位置は、使用されているスロットの位置によって決まるのではなく、定義されるときの位置によって置き換えられます。 父親.vue 子.vue スコープ付きスロットデータを転送するために使用されるスロットです。 スロットでデータを使用する場合は、スコープの問題に注意する必要があります。Vue の公式ドキュメントには、親テンプレートのすべてのコンテンツは親スコープでコンパイルされ、子テンプレートのすべてのコンテンツは子スコープでコンパイルされると記載されています。 子コンポーネントのデータを親のスロットコンテンツで利用できるようにするには、データを要素のプロパティとしてバインドします: v-bind:text="text" 知らせ: 匿名スコープスロットと名前付きスコープスロットの違いは、v-slot:defult="accepted name" (defult (anonymous は省略可能、named の反対は対応する名前を記述することです)) です。 v-solt は分解して受け取ることができます。分解によって受け取るフィールドは、渡されるフィールドと同じである必要があります。たとえば、1 は v-slot="{one}" に対応します。 レンダリング 要約するこれで、Vue のスロットの使用方法と適用シナリオに関するこの記事は終了です。Vue スロットの使用方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: DockerでのinfluxDB分散時系列データベースのインストールと関連操作について簡単に説明します。
1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...
この記事では、参考までに、Navicat for MySql の CSV ファイルのビジュアルインポ...
目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...
この記事の例では、簡単なショッピングカート機能を実現するためのjsの具体的なコードを参考までに共有し...
序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...
1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...
前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...
1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...
目次docker-compose.ymlを書くdocker-composeを実行するビルドステータス...
最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...
序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...
現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...
js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...
腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...
目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...