Vue のスロットを分析した記事

この記事では、vue のスロットについて詳しく説明し、Vue スロットで遊ぶのに役立ちます。皆さんのお役に立てれば幸いです。

Vue では、スロットは非常に強力な機能であり、カプセル化されたコンポーネントの柔軟性を大幅に向上させることができます。たとえば、コンポーネントをカプセル化するときにスロットを使用すると、親コンポーネントがそれを呼び出すと、コンポーネントをカプセル化するときにさまざまな使用シナリオをカバーする方法を考える必要がなく、ここのコンテンツは親コンポーネントによって自由に定義できます。 (学習ビデオ共有: vue ビデオ チュートリアル)

基本スロット

カプセル化する必要があるコンポーネントがあるとします。SlotComponent

<template>
  <div>这是一个slot：<slot> </slot></div>
</template>

<SlotComponent>来自父组件的内容</SlotComponent>

slot の内容は親コンポーネントで任意に定義できます。コンポーネントに <slot> 要素がない場合、親コンポーネントが呼び出されるときに、コンポーネントの開始タグと終了タグの間のコンテンツが失われます。

slot は SlotComponent コンポーネント内にあるため、親コンポーネントで呼び出すときに SlotComponent コンポーネント内のデータを使用できますか? Woolen布？スコープが異なるため、明らかに不可能です。

親テンプレート内のすべてのコンテンツは親スコープでコンパイルされ、子テンプレート内のすべてのコンテンツは子スコープでコンパイルされます。

スロットのデフォルトのコンテンツ

スロットはデフォルトのコンテンツを設定することもできます。これは、es6 のデフォルトの関数パラメータに少し似ています。 値。呼び出されたときに親コンポーネントがコンテンツを提供しない場合、このデフォルト値が表示されます。コンテンツが提供されている場合は、デフォルトのコンテンツが置き換えられます。

<template>
  <div>
    <slot>这是slot的默认内容</slot>
  </div>
</template>

<DefaultSlot></DefaultSlot>

呼び出し時にタグ間にコンテンツは提供されず、デフォルト値が表示され、隠蔽コンテンツになります。

名前付きスロット

コンポーネント内の複数の場所でスロットを使用する必要がある場合は、## を指定する必要があります。 #slot name を追加して、コンテンツが表示される場所を区別します。

// named slot，名字叫 NamedSlot
<template>
  <div>
    这是具名插槽
    <div>
      <slot name="slot1"></slot>
    </div>
    <div>
      <slot name="slot2"></slot>
    </div>
    <div>
      <slot name="slot3"></slot>
    </div>
  </div>
</template>

// 在父组件中调用
<NamedSlot>
    <template v-slot:slot1>这是插入slot1的内容</template>
    <template v-slot:slot2>这是插入slot2的内容</template>
    <template v-slot:slot3>这是插入slot3的内容</template>
</NamedSlot>

name 属性を slot に追加すると、コンテンツを v-slot:slotName の形式で配布できます。 name 属性が指定されていない場合、name はデフォルトで default (v-slot:default と同等) に設定されます。 #default と省略できます。

注、 v-slot は