vue はどのような場合にスロットを使用する必要がありますか?

使用シナリオ: スロットを使用すると、ユーザーはコンポーネントを展開してコンポーネントを再利用し、カスタマイズすることができます。親コンポーネントが再利用されたコンポーネントを使用している場合、このコンポーネントを取得すると、さまざまな場所で少数の変更が加えられるため、賢明ではありません。コンポーネントを書き換えます。スロットを介してコンポーネント内の指定された場所にコンテンツを渡し、レイアウト コンポーネント、テーブル列、ドロップダウン選択、ポップアップ ボックスの表示コンテンツなど、さまざまなシナリオでこの再利用可能なコンポーネントのアプリケーションを完了します。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

スロットとは

---

Web コンポーネントテクノロジー スイートの一部としての、HTML の slot 要素これは、Web コンポーネント内のプレースホルダーです。

このプレースホルダーは、独自のマークアップ言語を使用して後で入力できます

例

<template id="element-details-template">
  <slot name="element-name">Slot template</slot>
</template>
<element-details>
  <span slot="element-name">1</span>
</element-details>
<element-details>
  <span slot="element-name">2</span>
</element-details>

templateページに表示されません。最初にその参照を取得してから、DOM に追加する必要があります。Vue

の

customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
  }
})

の概念にも同じことが当てはまります。

Slot ステージ名スロット、花名が「穴を占めている」ことから、コンポーネントテンプレート内でソルトが位置を占めていることがわかります。コンポーネントラベルを使用すると、コンポーネントラベルの内容がテンプレートの穴（コンポーネントの差し替え）スロット位置を自動的に埋めて、配布コンテンツを運ぶ出口として使用します。

カード型のFCゲーム機に例えると、カードスロットが露出したゲーム機です。ユーザーがさまざまなゲーム磁気ストリップ (自動定義コンテンツ) を挿入するための (スロット)

使用シナリオ

---

スロットを通じて、ユーザーはコンポーネントを拡張してコンポーネントを再利用できます

親コンポーネントが再利用されたコンポーネントを使用し、このコンポーネントの少量の変更を別の場所で取得する場合、コンポーネントを書き直すのは賢明ではありません

パス スロットはコンテンツを転送しますコンポーネント内の指定された場所に配置して、レイアウト コンポーネント、テーブル列、ドロップダウン選択、ポップアップ ボックスの表示コンテンツなどのさまざまなシナリオでこの再利用可能なコンポーネントのアプリケーションを完了します。

分類

スロットは次の 3 つのタイプに分類できます。

---

#デフォルト スロット

• 名前付きスロット

• スコープ スロット

デフォルト スロット

サブコンポーネントは、 タグを使用してレンダリング位置を決定します。DOM 構造はタグ内に配置できます。コンテンツをスロットに渡さずに親コンポーネントが使用される場合、タグ内の DOM 構造は、タグ内の DOM 構造が表示されます。 親コンポーネントを使用する場合は、子コンポーネントのタグに直接内容を記述するだけです

Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

親コンポーネント

<Child>
  <div>默认插槽</div>  
</Child>

名前付きスロット

子コンポーネントは、name 属性を使用してスロットの名前を表し、デフォルトのスロットとして渡されませんWhen親コンポーネントで使用される場合、デフォルトで使用されます。 スロットに基づいて、スロット属性が追加され、値はサブコンポーネントのスロット名属性の値になります。

Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

親コンポーネント

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

スコープ スロット

サブコンポーネントはスコープ上のプロパティをバインドして、サブコンポーネント情報を親コンポーネントに渡します。これらのプロパティは、親コンポーネントの v-slot にハングされます。親コンポーネントの受け入れられたオブジェクト で、v-slot: (省略形: #) を使用して子コンポーネントの情報を取得し、コンテンツ内で

子コンポーネント Child.vue

を使用します。

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

親コンポーネント

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

概要:

v-slot

この属性は
• < ;template>

  でのみ使用できますが、デフォルトのスロットしかない場合はコンポーネント タグで使用できます#デフォルトのスロット名はdefault

  ですが、省略できます
default
• 直接書き込み

  v-slot ##省略形が # の場合、パラメータを省略して記述することはできません #default

• は分解によって取得できます v-slot={user }、名前を

  v-slot="{user: newName}"
に変更し、デフォルト値
• v-slot="{user = 'Default value'}"## を定義することもできます。

  #関連する推奨事項: vue.js ビデオ チュートリアル

以上がvue はどのような場合にスロットを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。