I.はじめに

開発におけるスロットの使用頻度は低くありません。スロットを使用すると、開発をよりパーソナライズするのに役立ちます。

2.分類

1.デフォルトスロット

サブコンポーネントで <slot></slot> を定義するだけです

2.名前付きスロット

サブコンポーネントで <slot name="xxx"></slot> を定義します。xxx はスロットの名前です。

3.スコープスロット

サブコンポーネントで <slot: aaa="xxx"></slot> を定義します。ここで、aaa は動的属性名、xxx は data 内のデータ名です。

1.デフォルトスロット

子コンポーネント: 親コンポーネントがコンテンツを渡さない場合に表示される、スロット内のコンテンツ

<template>
  <div>
    <slot>没有内容时我显示</slot>
  </div>
</template>

親コンポーネント: <demo/> は、定義された子コンポーネント名です

<demo>
   <h2>默认插槽</h2>
</demo>

2.名前付きスロット

サブアセンブリ:

<div>
    <slot name="one">没有内容时我显示</slot>
    <slot name="two">没有内容时我显示</slot>
</div>

親コンポーネント:

<demo>
   <h2 slot="one">我在使用具名插槽1</h2>
   <h2 slot="two">我在使用具名插槽2</h2>
</demo>

3.スコープスロット

サブコンポーネント: パラメーターを親コンポーネントに渡します。:msg は動的プロパティをバインドし、data 内のデータ名は等号の後に続きます。

<template>
  <div>
    <slot :msg="msg">没有内容时我显示</slot>
  </div>
</template>

親コンポーネント: slot-scope を使用して、等号の後の名前を自由に定義できる子コンポーネントのパラメーターを受け取ります。ただし、パラメーターの形式により、実際のデータを取得するために使用する場合はドットを使用する必要があります

<demo>
   <h2 slot-scope="content">{
   
   {content.msg}}</h2>
</demo>

クリックする必要がない場合は、コンテンツを直接使用すると、次のようにページが表示されます

4.注意する

①デフォルトスロット使用時、親コンポーネントを数回呼び出すとページが複数回表示される

<demo>
  <h2>默认插槽1</h2>
</demo>
<demo>
  <h2>默认插槽2</h2>
</demo>

②名前付きスロットを使用する場合、親コンポーネントが子コンポーネントのスロット名を指定していないと、親コンポーネントの内容が正しく表示されず、スロットを使用していないとみなされ、特定の内容が表示されます子コンポーネントのスロットに。

以上がスロットの紹介です。一緒に進めていきましょう。