Vue 名前付きスロットの基本的な使用例

Vue 名前付きスロットの基本的な使用例

序文

名前付きスロットは、スロット内の「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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue デフォルトスロットの理解とサンプルコード
  • Vue の匿名スロットと名前付きスロットの詳細な説明
  • Vue はスロットを使用してコンテンツを配布します。操作例 [単一スロット、名前付きスロット、スコープ付きスロット]
  • Vue の匿名スロット、名前付きスロット、スコープ付きスロットの使い方の詳細な説明
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • VUE のコンパイル スコープとスロット スコープのスロットの問題について
  • Vueスコープスロットの実装方法と機能の詳しい説明
  • Vue のデフォルト スロット、名前付きスロット、スコープ スロットの定義と使用方法

<<:  Nginx の負荷分散アルゴリズムとフェイルオーバー分析

>>:  MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

推薦する

MySQL で GTID モードをオンラインで有効または無効にする

目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...

CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)

1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...

HTMLページの読み込み速度を上げる方法

(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...

Linux でシェル スクリプトを使用して jar パッケージ プロジェクトを展開するための完全な手順

1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...

JS でオブジェクトを作成する 4 つの方法

目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...

MySQLの実行プロセスとシーケンスについての簡単な説明

目次1:mysql実行プロセス1.1: コネクタ1.2: キャッシュ1.3: アナライザー1.4: ...

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

フロントエンドの vue+express ファイルのアップロードとダウンロードの例

新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...

WMLとは何ですか?

WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャ...

Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法

Windows 環境と Linux 環境では結果が異なります。ウィンドウズステップ 1: Maven...

vue 動的コンポーネント

目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....

VMware Workstation での VMware vSphere のセットアップ (グラフィック チュートリアル)

VMware vSphere は、業界をリードする最も信頼性の高い仮想化プラットフォームです。 v...

VUE+Canvasはデスクトップピンボールブロック破壊ゲームのサンプルコードを実装します

誰もがピンボールやレンガ崩しのゲームをプレイしたことがあるでしょう。左と右のキーを使用して、下にある...

MySQLのサブクエリユニオンの効率性についての簡単な説明と

最近の製品テストでは、同時呼び出し数が 10 未満の場合に応答時間が 100 ミリ秒以内に維持できな...