序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。 知らせ: 1. 一致するものが見つからない場合は、匿名スロットに入れます 2. 名前付きスロットのレンダリング順序は、親コンポーネントの要素の順序ではなく、テンプレートに完全に依存します。 Vue の匿名スロット (デフォルトスロット)親コンポーネント <div> <myslot>私は今</myslot> </div> サブコンポーネント <div> <スロット><スロット> </div> Vue の名前付きスロット親コンポーネント <div> <マイスロット> <template #one>ピギーは大きな太った猫です</template> <template #two>彼らはみんな大きな嫌な奴らだ</template> <template #three>ミミは心ない小悪魔だ</template> 私は今 </div> サブコンポーネント <div> <スロット名="1"></スロット> <スロット><スロット> <スロット名="2"></スロット> <スロット名="3"></スロット> </div> レンダリング(おおよその順序)は vue スコープ スロットスコープ スロットをわかりやすい言葉で説明します。親コンポーネントは、スロットを介して子コンポーネントの対応するスロットによって運ばれるデータを読み取ることができます。 <div> <マイスロット> <テンプレート #oneData="oneData"> <div>{{oneData.one.message}}</div> </テンプレート> <template #two>彼らはみんな大きな嫌な奴らだ</template> <template #three>ミミは心ない小悪魔だ</template> 私はただ</myslot> </div> サブコンポーネント <div> <スロット名="1" :data='1'></スロット> <スロット><スロット> <スロット名="2"></スロット> <スロット名="3"></スロット> </div> <スクリプト> エクスポートデフォルト{ データ() { 戻る { 1つ: { メッセージ: 'これはサブコンポーネントのデータメッセージです' }, }; }, } </スクリプト> コードの最適化 <div> <マイスロット> <テンプレート #oneData="{oneData}"> <div>{{oneData.message} </div> </テンプレート> <template #two>彼らはみんな大きな嫌な奴らだ</template> <template #three>ミミは心ない小悪魔だ</template> 私は今 </div> サブコンポーネント <div> <スロット名="one" :oneData='one'></スロット> <スロット><スロット> <スロット名="2"></スロット> <スロット名="3"></スロット> </div> <スクリプト> エクスポートデフォルト{ データ() { 戻る { 1つ: { メッセージ: 'これはサブコンポーネントのデータメッセージです' }, }; }, } </スクリプト> 要約するvue 名前付きスロットの基本的な使用法に関するこの記事はこれで終わりです。より関連性の高い vue 名前付きスロットのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Nginx の負荷分散アルゴリズムとフェイルオーバー分析
>>: MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明
Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...
LinuxにMySQL 8.0.25をインストールするための最新のチュートリアルを参考にしてください...
VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...
1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...
目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...
この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...
以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...
Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...
目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...
思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...
1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...
MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...
ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...