Vue開発におけるスロットの理解と使用

著者：JingtengNetworkのJingtengFE。Webフロントエンドに焦点を当てた開発チームであり、Webフロントエンドの分野で困難な問題を解決するための長年の経験を蓄積してきました。高効率、高品質、成長、自由と幸福を提唱します。

出典：HangSengLIGHTクラウドコミュニティ

1.定義

vueのスロットは、コンポーネントのラベルによって<slot></slot>定義さラベルにはname属性があり、ユーザーは実際の状況に応じて設定することも、設定しないこともできます。name属性が設定されているスロットは[namedslots]と呼ばれ、name属性が設定されていないスロットは[unnamedslots]と呼ばれます。親コンポーネントで子コンポーネントを使用する場合、子コンポーネントタグのv-slotでスロット名を宣言するか、スロット名を宣言しないことで、子コンポーネントの名前付きスロットまたは名前なしスロットにhtmlコードを書き込むことができます。

スロット使用の特徴は、親コンポーネントで子コンポーネントのラベルが使用されている場合に、子コンポーネントにコードを書き込むことができることです。

2.手順を使用します

サブコンポーネントにラベルを付けて<slot>スロットを定義する
親コンポーネントで子コンポーネントを使用する場合は、v-slotを使用して子コンポーネントタグにhtmlコードを記述します。
vスロットは<template>ラベルで使用されます

3.スロット使用シナリオ

このようなシナリオ：親コンポーネント、子コンポーネント。

親コンポーネント

<template>
  <div class="slot-content">
    <Student v-slot:default>wangxiaoer</Student>
  </div>
</template>

サブアセンブリ

<template>
  <div>
    <span>name: </span>
  </div>
</template>

ここで、親コンポーネントは名前をラベルに直接挿入したいと考えています。しかし、それは裏目に出ました。ブラウザのレンダリングで、「wangxiaoer」フィールドが表示されていないことがわかりました。下の図3.1に示すように。親コンポーネントでコードを記述し、子コンポーネントで正常にレンダリングする場合は、スロットを使用してそれを実現できます。

スロット3-1.png

（図3.1）

4.スロットの使用方法

上記のサブコンポーネントのコードを変更します

<template>
  <div>
    <span>name: </span>
    <slot></slot>
  </div>
</template>

親コンポーネントのコードは変更されていません。この時点で、ブラウザが親コンポーネントからコンポーネントに「wangxiaoer」を挿入しているように見えることがわかりました。図4.1

スロット4_1.png

（図4.1）

定義を組み合わせると、このシナリオでは名前のないスロットを使用していることがわかります。では、名前付きスロットの使い方は？上記のコードを引き続き変更します

サブコンポーネントは次のように変更されます

<template>
  <div>
    <div>
      <span>name: </span>
      <slot></slot>
    </div>
    <div>
      <span>age：</span>
      <slot name="age-slot"></slot>
    </div>
  </div>
</template>

親コンポーネントは次のように変換されます

<template>
  <div class="slot-content">
    <Student v-slot:default>wangxiaoer</Student>
    <Student>
      <template v-slot:default>
        wangdagang
      </template>
      <template v-slot:age-slot>
         18岁
      </template>
    </Student>
  </div>
</template>

効果は図4.2のようになります。

スロット4.2.png

（図4.2）

v-slot：defaultは名前のないスロットを参照していることがわかります。通常の文字列をv-slotに割り当てる場合、この文字列はスロットの名前です。

5.スコープスロット

スコープスロットについては、公式Webサイトで次のように説明されています。親コンポーネントテンプレートのすべてのコンテンツは、親スコープでコンパイルされます。簡単に言うと、子コンポーネントで直接定義できないのは、親コンポーネントのデータデータです。スコープの出現は、そのような問題を解決することです。

指示：

vスロットの宣言後、=を使用してスコープスロットを接続し、スコープスロットの宣言を完了します（例（v-slot：defaule = "scope"））。

そのようなシナリオがあります：子コンポーネント、親コンポーネント

親コンポーネント

<template>
  <div>
    <Teacher>
      <template
        v-slot:teacher-info>
        <div v-for="item in list">
          父组件传入的内容
          <div>name: {{item.name}}</div>
          <div>age: {{item.age}}</div>
        </div>
      </template>
    </Teacher>
  </div>
</template>

サブアセンブリ

<template>
  <div>
    这是子组件
    <slot name="teacher-info"></slot>
  </div>
</template>

<script>
  export default {
    name: 'SlotScope',
    components: {},
    data () {
      return {
        list: [{
          name: 'zhangyue',
          age: '18'
        }, {
          name: 'liuyue',
          age: '20'
        }, {
          name: 'zhaoyue',
          age: '22'
        }]
      };
    },
    methods: {}
  }
</script>

コードロジックから、親コンポーネントが子コンポーネントをレンダリングするときに処理するために子コンポーネントのリストを使用するシーンであることが明らかです。しかし、ブラウザのレンダリング結果によると、失敗しました。図5.1

スロット5_1.png

（図5.1）

上記のシナリオの要件を達成するために、スコープを使用して要件を達成できます。コードの変更は次のとおりです

親コンポーネントコードは次のように変更されます

<template>
  <div>
    <Teacher>
      <template
        v-slot:teacher-info="scope">
        <div v-for="item in scope.list">
          父组件传入的内容
          <div>name: {{item.name}}</div>
          <div>age: {{item.age}}</div>
        </div>
      </template>
    </Teacher>
  </div>
</template>

この時点で、ブラウザが達成したい効果を正常にレンダリングしたことがわかります。図5.2

スロット5_2.png

（図5.2）

Vue開発におけるスロットの理解と使用

おすすめ