Vueスロットの使用の詳細

1. スロットを使用する理由

1.1 スロット

コンピュータの USB スロットや電源タップの電源スロットなど、生活のさまざまな場所にスロットがあります。
スロットの目的は、当社のオリジナル機器をより拡張可能にすることです
たとえば、USB フラッシュドライブ、携帯電話、マウス、キーボードなどをコンピューターのUSBに挿入できます。

1.2 コンポーネントのスロット

コンポーネントスロットは、コンポーネントの拡張性を高めるためにも役立ちます。
コンポーネント内に何を表示するかをユーザーが決められるようにする

1.3 例

モバイル開発では、ほぼすべてのページにナビゲーションバーがあります
ナビゲーションバーをプラグインにパッケージ化する必要がある
このコンポーネントを作成したら、複数のページで再利用できます。

2. このようなコンポーネントをカプセル化する方法（スロット）

カプセル化する最良の方法は、共通部分をコンポーネントに抽出し、異なる部分をスロットとして公開することです。
スロットを予約したら、ユーザーが自分のニーズに応じてスロットに何を挿入するかを決定できるようにします。
検索ボックス、テキスト、またはボタンです。決定するのはスケジューラ次第です。

3. スロットケース

<div id="アプリ">
  <cpn><button>ボタン</button></cpn>
  <cpn><p>こんにちは世界</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<テンプレートid="cpn">
  <div>
    <h2>私はコンポーネントです</h2>
    // このスロットはユーザーが <slot></slot> に入力するために予約されています
  </div>
</テンプレート>
<script src="../js/vue.js"></script>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    コンポーネント:
      "cpn": {
        テンプレート: `#cpn`,
      }
    }
  })
</スクリプト>

上記のコードは次のことを行います。

1. サブコンポーネントcpnを定義し、サブコンポーネント内のスロットを予約し、スロットの内容はユーザーが入力します。
2. 親コンポーネントは子コンポーネントを 3 回使用し、3 つの子コンポーネントはスロットに異なるコンテンツを入力します。

最終的な表示効果は次のようになります。

4. スロットのデフォルト値

このコンポーネントを頻繁に使用する必要があり、コンポーネントによって予約されたスロットのほとんどが戻るボタンで埋められ、他のボタンで埋められているのはほんのわずかである場合、この場合はスロットのデフォルト値を設定できます。

<div id="アプリ">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<テンプレートid="cpn">
  <div>
    <slot><button>戻る</button></slot>
  </div>
</テンプレート>

子コンポーネントに戻るボタンのデフォルト値を持つスロットを設定します。親コンポーネントが使用時に何も入力されていない場合、デフォルトは戻るボタンになります。

5. 名前付きスロット

場合によっては、複数のスロットが必要になることがあります。たとえば、次のテンプレートを持つコンポーネントの場合:

<テンプレートid="cpn">
  <div>
    <span>ヘッダー</span></slot>
    <span>中央</span></slot>
    <span>フッター</span></slot>
  </div>
</テンプレート>

コンポーネント内に3つのスロットを予約していますが、ここでは3つの名前を指定しています。後続の親コンポーネントはv-slotを使用してname属性を指定した後、次のコードのように独自のコンテンツを埋めることができます。

<div id="アプリ">
  <cpn>
    <テンプレート v-slot:header>
      <p>ヘッダー</p>
    </テンプレート>
    <テンプレート v-slot:footer>
      <p>フッター</p>
    </テンプレート>
  </cpn>
</div>

cpnコンポーネントを使用し、スロットname属性をheaderとfooterのコンテンツとして指定します。指定後、入力したコンテンツがデフォルトのコンテンツに置き換えられます。

注:ここでの構文形式は固定されており、テンプレートタグを使用する場合は v-slot: スロット名をバインドする必要があります。

6. コンパイル範囲

外部からコンポーネントに渡された変数は、後でスロットを使用するときには使用できません。

<div id="アプリ">
  <cpn v-show="isShow"></cpn>
</div>
<テンプレートid="cpn">
  <p>こんにちは</p>
</テンプレート>
<script src="../js/vue.js"></script>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      isShow: 真
    },
    コンポーネント:
      "cpn": {
        テンプレート: `#cpn`,
        データ（）{
          戻る {
            isShow: 偽
          }
        }
      }
    }
  })
</スクリプト>

上記では、属性isShowを持つサブコンポーネントcpnを定義しました。属性isShowは、 appインスタンスでも定義されています。最後に、サブコンポーネントcpnを使用する場合は、 v- show使用されます。値がtrueの場合は表示され、値がfalseの場合は表示されません。
質問: v-showのisShowの値はインスタンスでは true ですか、それとも子コンポーネントでは false ですか?
回答:そうです。アプリインスタンスのスコープ内で使用しているため、 isShowインスタンス内のdataからそれを探します。cpn サブcpnにバインドしていますが、ここでは cpn を通常のタグとして扱うだけで済みますisShowの値をfalseたい場合は、サブコンポーネントのtemplateで<p v-show="isShow">hello</p>使用するだけで済みます。 <p v-show="isShow">hello</p>

7. スコープ付きスロット

デフォルトでは、スロット内のコードはグローバルVue内のプロパティのみを使用できます。カスタムコンポーネントでプロパティを使用する場合は、 slotを定義するときにv-bindを使用してバインドする必要があります。

<div id="アプリ">
  <cpn>
    <テンプレート v-slot:default="スロット">
      {{slot.data.firstName}}
    </テンプレート>
  </cpn>
</div>
<テンプレートid="cpn">
  <div>
    <スロット:data="ユーザー">
      {{user.lastname}}
    </スロット>
  </div>
</テンプレート>
<script src="../js/vue.js"></script>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    コンポーネント:
      "cpn": {
        テンプレート: `#cpn`,
        データ（）{
          戻る {
            「ユーザー」: {
              "firstName": "甲",
              "姓": "貝虫"
            }
          }
        }
      }
    }
  })
</スクリプト>

上記のコードは次のことを行います。

1. サブコンポーネントcpnを定義し、サブコンポーネント内のuserを定義します。
2. 属性dataサブコンポーネントcpnテンプレートのスロットにバインドされ、スロットのデフォルト値はuser.lastnameです。 user.lastname
3. サブコンポーネントはhtmlで使用され、スロットPropオブジェクトはv-slotを使用してバインドされるため、サブコンポーネント内のデータはオブジェクト名を通じてアクセスできます。サブコンポーネントにバインドされているプロパティ名 ( slot.data )

Vue スロットの使い方についての詳細はこれで終わりです。Vue スロットの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: