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つの方法の詳細な説明

推薦する

LinuxにPython 3.6をインストールして落とし穴を避ける

Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...

Linux での MySQL 8.0.25 のインストールと設定のチュートリアル

LinuxにMySQL 8.0.25をインストールするための最新のチュートリアルを参考にしてください...

MySQL マスタースレーブスイッチチャネルの問題の解決策

VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...

MySQL チュートリアル データ定義言語 DDL の例 詳細な説明

目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...

弾幕効果を実現するためのjQuery

この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...

MySQL 5.7 の /etc/my.cnf パラメータの紹介

以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...

Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法

Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...

JavaScript 正規表現の説明

目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...

Linux での MySQL 5.6 バイナリのインストール プロセス

1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...

シェルスクリプトを使用して CentOS7 に python3.8 環境をインストールする (推奨)

ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

Mysql ルートユーザーアカウントのパスワードをリセットする問題を解決する

問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...