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 をよろしくお願いいたします。

以下もご興味があるかもしれません: