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 コードを使用する際のポイント
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...
方法1: グローバル general_log を 'OFF' に設定します。 テーブ...
では、GIF、PNG、JPG のどの形式を候補形式として選択すればよいのでしょうか。また、どの画像形...
目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...
Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...
前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...
ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...
目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...
提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...
この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...
目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...
この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...
CentOS 8 ではソフトウェア パッケージのインストール プログラムが変更され、yum 構成方法...
ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...
mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...