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

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

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

基本スロット

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

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

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

slot の内容は親コンポーネントで任意に定義できます。コンポーネントに <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 は

スロットは子コンポーネントのコンテンツにどのようにアクセスしますか?

slot を通じて、親内の子コンポーネントにコンテンツを追加できます。コンポーネントではあるが、親子コンポーネントの役割が異なる ドメインが異なる 子コンポーネントのデータを親コンポーネントで利用したい場合はどうすればよいでしょうか？

子コンポーネントの

要素に属性をバインドできます。その値は、親コンポーネントに渡す必要があるコンテンツです。

// 子组件 组件名称为 SlotProp
<div>
    <slot name="slot1" :value1="child1"></slot>
    <slot name="slot2" :value2="child2"></slot>
</div>
//调用
<SlotProp>
  <template v-slot:slot1="slotProps">
    {{ slotProps.value1 }}
  </template>
  <template v-slot:slot2="slotProps">
    {{ slotProps.value2 }}
  </template>
</SlotProp>

簡単に言うと、

slot, の :key='value'

の形式で値をバインドすることです。親コンポーネント呼び出し時に、

v-slot:slotName="slotProps" の形式でこの値を取得します。slotProps 名は自分で定義できます。

次に、

slotProps [key] を渡してこの値を取得します。

コンポーネントにデフォルトのテンプレートが 1 つだけある場合は、

template に v-slot:slotName="slotProps" を記述する必要はありません。 v-slot

<SlotProp v-slot:default="slotProps">
    {{ slotProps.value1 }}
</SlotProp>

と記述します。前述のように、

name が指定されていない場合は、default とみなされます。ここでも同じことが当てはまります。v-slot:default="slotProps" は、v-slot="slotProps" と省略できます。

slotProps の構造化

スコープ付きスロットの内部動作は、単一の引数で渡される関数にスロットの内容を含めることです

スロットの実装原則に基づいて、

deconstruction、## など、いくつかの ES6 構文を使用して slotProps を操作することもできます。 #prop は の名前を変更し、 はデフォルト値 などを割り当てます。

// 解构
<SlotProp v-slot="{ value1 }">
    {{ value1 }}
</SlotProp>

// 重命名,将 value1 重命名为 name1
<SlotProp v-slot="{ value1: name1 }">
    {{ name1 }}
</SlotProp>

// 赋默认值
<SlotProp v-slot="{ value1 = &#39;这是默认值&#39; }">
    {{ value1 }}
</SlotProp>

動的スロット名

slot

<template v-slot:></template> でサポートされています動的スロットを実装する方法。 基本コンポーネントのループに複数の

slot

が挿入されることがあります。たとえば、<pre class="brush:php;toolbar:false;">&lt;div v-for=&quot;item in slotList&quot; :key=&quot;item&quot;&gt; &lt;slot :name=&quot;item&quot;&gt;&lt;/slot&gt; &lt;/div&gt;</pre> は呼び出し時に

動的スロット名#を使用できます。

## をループして、対応する slot を動的にレンダリングします。

<template
  v-for="item in slotList"
  v-slot:[item]
>
    {{item}}
</template>

（学习视频分享：web前端开发、编程基础视频）

以上がVue のスロットを分析した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。