1. スロットを使用する理由1.1 スロット
1.2 コンポーネントのスロット
1.3 例
2. このようなコンポーネントをカプセル化する方法(スロット)
3. スロットケース<div id="アプリ"> <cpn><button>ボタン</button></cpn> <cpn><p>こんにちは世界</p></cpn> <cpn><p>666</p></cpn> </div> <テンプレートid="cpn"> <div> <h2>私はコンポーネントです</h2> // このスロットはユーザーが <slot></slot> に入力するために予約されています </div> </テンプレート> <script src="../js/vue.js"></script> <スクリプト> constアプリ = 新しいVue({ el: "#app", コンポーネント: "cpn": { テンプレート: `#cpn`, } } }) </スクリプト> 上記のコードは次のことを行います。
最終的な表示効果は次のようになります。 4. スロットのデフォルト値このコンポーネントを頻繁に使用する必要があり、コンポーネントによって予約されたスロットのほとんどが戻るボタンで埋められ、他のボタンで埋められているのはほんのわずかである場合、この場合はスロットのデフォルト値を設定できます。 <div id="アプリ"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <テンプレートid="cpn"> <div> <slot><button>戻る</button></slot> </div> </テンプレート> 子コンポーネントに戻るボタンのデフォルト値を持つスロットを設定します。親コンポーネントが使用時に何も入力されていない場合、デフォルトは戻るボタンになります。 5. 名前付きスロット場合によっては、複数のスロットが必要になることがあります。たとえば、次のテンプレートを持つコンポーネントの場合: <テンプレートid="cpn"> <div> <span>ヘッダー</span></slot> <span>中央</span></slot> <span>フッター</span></slot> </div> </テンプレート> コンポーネント内に3つのスロットを予約していますが、ここでは3つの名前を指定しています。後続の親コンポーネントは <div id="アプリ"> <cpn> <テンプレート v-slot:header> <p>ヘッダー</p> </テンプレート> <テンプレート v-slot:footer> <p>フッター</p> </テンプレート> </cpn> </div>
6. コンパイル範囲外部からコンポーネントに渡された変数は、後でスロットを使用するときには使用できません。 <div id="アプリ"> <cpn v-show="isShow"></cpn> </div> <テンプレートid="cpn"> <p>こんにちは</p> </テンプレート> <script src="../js/vue.js"></script> <スクリプト> constアプリ = 新しいVue({ el: "#app", データ: { isShow: 真 }, コンポーネント: "cpn": { テンプレート: `#cpn`, データ(){ 戻る { isShow: 偽 } } } } }) </スクリプト> 上記では、属性 7. スコープ付きスロットデフォルトでは、スロット内のコードはグローバル <div id="アプリ"> <cpn> <テンプレート v-slot:default="スロット"> {{slot.data.firstName}} </テンプレート> </cpn> </div> <テンプレートid="cpn"> <div> <スロット:data="ユーザー"> {{user.lastname}} </スロット> </div> </テンプレート> <script src="../js/vue.js"></script> <スクリプト> constアプリ = 新しいVue({ el: "#app", コンポーネント: "cpn": { テンプレート: `#cpn`, データ(){ 戻る { 「ユーザー」: { "firstName": "甲", "姓": "貝虫" } } } } } }) </スクリプト> 上記のコードは次のことを行います。
Vue スロットの使い方についての詳細はこれで終わりです。Vue スロットの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ウェブページ作成時に標準 HTML コードを使用する際のポイント
この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共...
目次ルーティングプラグインをモジュール方式で使用するルートの使用宣言型ナビゲーションプログラムによる...
目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...
目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...
この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...
この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な...
まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクト...
VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...
アプリをテストしたいが、それを携帯電話で実行したくない場合があります。この場合、仮想マシンを使用して...
SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...
今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...
序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...
目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...
毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...
問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...