Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

スロットなし

<div id="アプリ">
    <子供>
        <span>1111</span>    
    </子>
</div>


<スクリプト>
    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: "<div>これは div タグです</div>"
    });

    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

テンプレート内のspan標簽、以下に示すように、「 <div>這是一個div標簽</div> 」に置き換えられます。

ここに写真の説明を記入してください

Vue2.x スロット

スロット付き

簡単に言えば、 slot標簽を使用して、子コンポーネントに表示したい場所に<span>1111</span>を配置できます。以下のように表示されます。

<div id="アプリ">
    <子供>
        <span>1111</span>    
    </子>
</div>


<スクリプト>
    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: "<div>これは <slot></slot>div タグ</div> です"
    });

    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

ここに写真の説明を記入してください

複数のタグがある場合でも、それらは一緒に挿入されます。これは、 <slot></slot>タグを、親コンポーネントによって子コンポーネントに配置されたタグに置き換えることと同じです。以下のように表示されます。

<div id="アプリ">
    <子供>
        <span>1111</span>   
        2222年
        <b>3333</b>
    </子>
</div>


<スクリプト>
    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: "<div>これは <slot></slot>div タグ</div> です"
    });

    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

ここに写真の説明を記入してください

名前付きスロット

  1. 親コンポーネントは、配布するタグにslot="xxx"属性を追加します。
  2. 対応する配布場所のslot標簽で、サブコンポーネントにname="xxx"属性を追加します。
  3. 次に、対応するラベルが対応する位置に配置されます。以下のように表示されます。
<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"
        });
    </スクリプト>

slot="two"は、以下に示すように固定位置に挿入されます。

ここに写真の説明を記入してください

スロットの簡単なサンプルアプリケーション

コンピュータのマザーボード上のさまざまなスロットについて考えてみましょう。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 の新機能)

スコープ スロットは、すでにレンダリングされた要素を置き換えるための再利用可能なテンプレート (データを渡すことができる) として機能する特別なタイプのスロットです。

  1. 子コンポーネントでは、コンポーネントにプロパティを渡すのと同じように、スロットにデータを渡すだけです。
  2. 親コンポーネントでは、子コンポーネントによって渡されるデータslot-scope="scoped"を通じて取得されます。このデータ オブジェクトのエイリアスはscopedです。これはスコープ付きスロットのテンプレートです。
<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 では、名前付きスロットとスコープ付きスロットはそれぞれslotslot-scopeを使用して実装されます。Vue3.x では、 slotslot-scopeが組み合わされて一緒に使用されます。

親コンポーネント:

<テンプレート>
	<子供>
		<!-- <テンプレート スロット="コンテンツ" スロット スコープ="スコープ付き"> -->
		<テンプレート v-slot:content="scoped">
			<div>{{scoped.myName}}</div>
		</テンプレート>
	</子>
</テンプレート>

サブコンポーネント:

<テンプレート>
	<スロット名="コンテンツ" :myName="私の名前"></スロット>
</テンプレート>

<スクリプト>

'vue' から { ref } をインポートします
エクスポートデフォルト{
	設定 () {

		let myName = ref("ミスター・キャッツ・ビーン")

		{ myName } を返します
	},
}
</スクリプト>

Vue.js スロットのスコープ付きスロットの詳しい使い方については、これで終わりです。Vue.js スロットのスコープ付きスロットに関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js 動的コンポーネント分析
  • Vue.js 親子コンポーネント通信の動的バインディングの例
  • Vue.js での動的コンポーネント テンプレートの実装
  • vue.js 動的コンポーネントの詳細な説明
  • フロントエンドアーキテクチャ Vue アーキテクチャ スロット使用チュートリアル
  • Vue2のスロットの基本的な使用仕様
  • Vue のデフォルト スロット、名前付きスロット、スコープ スロットの定義と使用方法
  • vue.js の動的コンポーネントとスロットの使用の概要

<<:  mysqlはタイムゾーン関連の問題を解決します

>>:  CUDA8.0とCUDA9.0はUbuntu16.04で共存します

推薦する

複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装

現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...

CSS で背景ぼかし効果を実装するサンプルコード

以下のような効果でしょうか?もしそうなら、ぜひ読み進めてください! コードデモンストレーション(上の...

CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。

最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...

Linuxでサーバーのハードウェア情報を表示する方法

みなさんこんにちは。今日は12連休ですが、何かお買い物はしましたか?今日は「Linux View S...

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装

目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...

MySQL の int(n) の後の n はどういう意味ですか?

int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...

docker compose helloworld を使い始めるための詳細なプロセス

前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...

Dockerカスタムネットワークの詳細な紹介

目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

HTML テーブル マークアップ チュートリアル (42): テーブル ヘッダーの水平方向の配置属性 ALIGN

水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...

Vueコンポーネントの再利用と拡張の詳細な説明

目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

Nginx をインストールして複数のドメイン名を設定する方法

Nginx のインストールCentOS 6.x yum にはデフォルトで nginx ソフトウェア ...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...