スロットなし<div id="アプリ"> <子供> <span>1111</span> </子> </div> <スクリプト> // 子コンポーネントを登録する Vue.component("child", { テンプレート: "<div>これは div タグです</div>" }); // 親コンポーネントを初期化する new Vue({ el: "#app" }); </スクリプト> テンプレート内の Vue2.x スロットスロット付き簡単に言えば、 <div id="アプリ"> <子供> <span>1111</span> </子> </div> <スクリプト> // 子コンポーネントを登録する Vue.component("child", { テンプレート: "<div>これは <slot></slot>div タグ</div> です" }); // 親コンポーネントを初期化する new Vue({ el: "#app" }); </スクリプト> 複数のタグがある場合でも、それらは一緒に挿入されます。これは、 <div id="アプリ"> <子供> <span>1111</span> 2222年 <b>3333</b> </子> </div> <スクリプト> // 子コンポーネントを登録する Vue.component("child", { テンプレート: "<div>これは <slot></slot>div タグ</div> です" }); // 親コンポーネントを初期化する new Vue({ el: "#app" }); </スクリプト> 名前付きスロット
<div id="アプリ"> <子供> <span slot="one">1111</span> <i slot="two">2222</i> <b スロット="3">3333</b> </子> </div> <スクリプト> // 子コンポーネントを登録する Vue.component("child", { テンプレート: `<div> これは <slot name='one'></slot> です 1 つの <slot name='two'></slot> 分割 <スロット名='3'></スロット> タグ </div>` }); // 親コンポーネントを初期化する new Vue({ el: "#app" }); </スクリプト> スロット属性なしサブコンポーネントタグにスロット属性がない場合、デフォルト値が表示されます。 <div id="アプリ"> <子供> <!-- <span slot="one">1111</span> --> <i slot="two">2222</i> <!-- <b slot="three">3333</b> --> </子> </div> <スクリプト> // 子コンポーネントを登録する Vue.component("child", { テンプレート: `<div> <slot name='one'>誰も</slot> <slot name='two'>いいえ 2</slot> <slot name='three'>3 ではない</slot> </div>` }); // 親コンポーネントを初期化する new Vue({ el: "#app" }); </スクリプト>
スロットの簡単なサンプルアプリケーションコンピュータのマザーボード上のさまざまなスロットについて考えてみましょう。CPU 用、グラフィック カード用、メモリ用、ハード ディスク用のスロットがあります。したがって、computer というコンポーネントがあり、そのテンプレートが template であると仮定します。 <本文> <div id="アプリ"> <コンピュータ> <div slot="CPU">インテル Core i7</div> <div slot="GPU">GTX980Ti</div> <div slot="メモリ">キングストン 32G</div> <div slot="ハードドライブ">Samsung SSD 1T</div> </コンピュータ> </div> <スクリプト> // サブコンポーネントを登録する Vue.component("computer", { テンプレート: `<div> <slot name="CPU">ここに CPU を接続します</slot> <slot name="GPU">ここにグラフィック カードを接続します</slot> <slot name="Memory">ここにメモリを挿入します</slot> <slot name="Hard-drive">ここにハードドライブを接続します</slot> </div>` }); // 親コンポーネントを初期化する new Vue({ el: "#app" }); </スクリプト> </本文> スコープ付きスロット (2.1.0 の新機能)スコープ スロットは、すでにレンダリングされた要素を置き換えるための再利用可能なテンプレート (データを渡すことができる) として機能する特別なタイプのスロットです。
<div id="アプリ"> <子供> <!-- 2. スコープが { "myName": "猫老板的豆" } に設定された myName データを受信します --> <テンプレート スロット="コンテンツ" スロット スコープ="スコープ指定"> <div>{{ スコープ付き.myName }}</div> </テンプレート> </子> </div> <スクリプト> Vue.component('child', { データ () { 戻る { 私の名前: 「猫のボスの豆」 } }, テンプレート: `<slot name="content" :myName="myName"></slot>` // 1. myName データを破棄します }) 新しいVue({ el: "#app" }); </スクリプト> Vue3.x スロットスロット<!-- 親コンポーネント --> <テンプレート> <子供> <!-- Vue2.x の記述 <div slot="parent"> <div>親コンポーネント</div> </div> --> <テンプレート v-slot:親> <div>親コンポーネント</div> </テンプレート> </子> </テンプレート> <!-- 子コンポーネント --> <テンプレート> <slot name='parent'>子コンポーネント</slot> </テンプレート> スコープ付きスロットVue2.x では、名前付きスロットとスコープ付きスロットはそれぞれ 親コンポーネント: <テンプレート> <子供> <!-- <テンプレート スロット="コンテンツ" スロット スコープ="スコープ付き"> --> <テンプレート v-slot:content="scoped"> <div>{{scoped.myName}}</div> </テンプレート> </子> </テンプレート> サブコンポーネント: <テンプレート> <スロット名="コンテンツ" :myName="私の名前"></スロット> </テンプレート> <スクリプト> 'vue' から { ref } をインポートします エクスポートデフォルト{ 設定 () { let myName = ref("ミスター・キャッツ・ビーン") { myName } を返します }, } </スクリプト> Vue.js スロットのスコープ付きスロットの詳しい使い方については、これで終わりです。Vue.js スロットのスコープ付きスロットに関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: CUDA8.0とCUDA9.0はUbuntu16.04で共存します
現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...
以下のような効果でしょうか?もしそうなら、ぜひ読み進めてください! コードデモンストレーション(上の...
最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...
みなさんこんにちは。今日は12連休ですが、何かお買い物はしましたか?今日は「Linux View S...
CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...
目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...
int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...
前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...
目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...
序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...
水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...
目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...
目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...
Nginx のインストールCentOS 6.x yum にはデフォルトで nginx ソフトウェア ...
これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...