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 スティッキーフッター実装コード

推薦する

JSはオンラインでのアナウンスのスクロール効果を実現します

この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共...

Vueルーティングルーターの詳細な説明

目次ルーティングプラグインをモジュール方式で使用するルートの使用宣言型ナビゲーションプログラムによる...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

テーブル編集操作を実現する js+Html

この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...

Vueは小さな検索機能を実装する

この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な...

Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します

まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクト...

VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...

VMware 仮想マシンに Android x86 をインストールする方法

アプリをテストしたいが、それを携帯電話で実行したくない場合があります。この場合、仮想マシンを使用して...

Linux での SSH 非秘密通信の実装

SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...

JavaScript 戦略パターンを使用してフォームを検証する方法

目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...

一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...

mysql エラー 1045 (28000) - ユーザーへのアクセスが拒否される問題を解決する方法

問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...