Vueスロットの使用の詳細

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属性をheaderfooterのコンテンツとして指定します。指定後、入力したコンテンツがデフォルトのコンテンツに置き換えられます。

注:ここでの構文形式は固定されており、テンプレート タグを使用する場合は 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-showisShowの値はインスタンスでは 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vuejs 11番目のコンポーネントのスロットコンテンツ配布例の詳細説明
  • Vue のスロットを使用して親コンポーネントのコンテンツを配布し、再利用性が高く柔軟性の高いコンポーネントを実現します (推奨)
  • vue3.0 でスロット コンポーネントを使用してボタンをカプセル化する

<<:  ウェブページ作成時に標準 HTML コードを使用する際のポイント

>>:  CSS スティッキーフッター実装コード

推薦する

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

Mysql general_log をクリーンアップする方法の概要

方法1: グローバル general_log を 'OFF' に設定します。 テーブ...

ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

では、GIF、PNG、JPG のどの形式を候補形式として選択すればよいのでしょうか。また、どの画像形...

TypeScript 列挙の基本と例

目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...

Dockerはbusyboxを使用してベースイメージを作成します

Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...

node.js チュートリアルの Util モジュールの例の詳細な説明

目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

mysql インストーラ ウェブ コミュニティ 5.7.21.0.msi インストール グラフィック チュートリアル

この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...

CentOS8 yum/dnfで国内ソースを設定する方法

CentOS 8 ではソフトウェア パッケージのインストール プログラムが変更され、yum 構成方法...

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...