Vue のスロットとフィルターの詳細な説明

Vue のスロットとフィルターの詳細な説明

スロット

スロットとは何ですか?

コンセプト

Vue はコンテンツ配信 API のセットを実装し、配信されたコンテンツを運ぶための出口としてコンポーネントの <slot> 要素を提供します。

簡単に言えば、<slot> 要素はコンポーネント テンプレート内のコンテンツ配信スロットとして機能します。 <slot> 要素自体が置き換えられます。

スロットの内容

文法

まず、スロットを書き込むための新しいファイルを作成します

// スロット.vue

<テンプレート>
  <div>
    <div>
      <!-- 配信内容はこのスロットタグの位置に運ばれます -->
      <スロット></スロット>
    </div>
    <p>アカウント: <input /></p>
    <p>パスワード: <input type="password" /></p>
    <button>ログイン</button>
  </div>
</テンプレート>

<スクリプト>
デフォルトをエクスポートします {};
</スクリプト>

<スタイル>
</スタイル>

次にそれを別のコンポーネント(SlotTest)で使用します。

// スロットテスト.vue

<テンプレート>
  <div>
    <スロットコム>
        <h2>私はスロットに配信されるコンテンツです</h2>
    </スロットCom>
  </div>
</テンプレート>

<スクリプト>
// インポート import slotCom from "../views/slot";

エクスポートデフォルト{
  コンポーネント:
    スロットコム
  },
}
</スクリプト>

<スタイル>
</スタイル>

効果図 (下記) から、h2 タグ内の文がページ上にレンダリングされ、タグの位置も slot.vue ファイル内のタグに対応していることがわかります。

知らせ

<SlotTest> テンプレートに <slot> 要素が含まれていない場合、コンポーネントの対称タグ内のすべてのコンテンツは破棄されます。

コンパイルスコープ

たとえば、スロット内のデータを使用したい場合:

<ナビゲーションリンク url="/プロフィール">
  {{ user.name }} としてログインしました
</ナビゲーションリンク>

スロットは、テンプレートの残りの部分と同じインスタンス プロパティ (したがって同じ「スコープ」) にアクセスできますが、<navigation-link> のスコープにはアクセスできません。たとえば、次の URL にはアクセスできません:

<ナビゲーションリンク url="/プロフィール">
  ここをクリックすると、{{ url }} に移動します。

  /* ここでの `url` は、その内容が <navigation-link> コンポーネント *内で* 定義されるのではなく、<navigation-link> に _渡される_ ため、未定義になります。
  */
</ナビゲーションリンク>

原則として、次の点に注意してください。

親テンプレート内のすべてのコンテンツは親スコープでコンパイルされ、子テンプレート内のすべてのコンテンツは子スコープでコンパイルされます。

フォールバックコンテンツ

<slot> 要素を使用してフォールバック コンテンツを設定できます。現在のコンポーネントの対称タグにコンテンツが挿入されていない場合、コンポーネントは最終的にフォールバック コンテンツをレンダリングします。簡単に言えば、スロットのデフォルト値に相当します。

// ボタンコンポーネント、フォールバックコンテンツをテキスト送信に設定する
<ボタンタイプ="送信">
  <slot>送信</slot>
</ボタン>

// 親コンポーネントで <submit-button> を使用し、スロット コンテンツを提供しない場合:
<送信ボタン></送信ボタン>

// フォールバック コンテンツ「Submit」がレンダリングされます。
<ボタンタイプ="送信">
  提出する
</ボタン>

// ただし、コンテンツを提供する場合は:
<送信ボタン>
  保存
</送信ボタン>

// フォールバック コンテンツの代わりに提供されたコンテンツがレンダリングされます。
<ボタンタイプ="送信">
  保存
</ボタン>

名前付きスロット

概念 場合によっては、コンポーネントに複数のスロットが必要になることがあります。異なるコンポーネントを異なるスロットに挿入できます。これは、名前付きスロットを使用し、コンポーネント内の <slot> 要素に name 属性を設定することによって行われます。名前付きスロットにコンテンツを提供する場合、<template> 要素の v-slot ディレクティブを使用して、対応するコンテンツを指定された <slot> 要素に挿入できます。

文法

// ログインコンポーネント.vue

<テンプレート>
    <div>
        <div>
            <slot>バックアップコンテンツ</slot>
        </div>
        <p>
            アカウント: <slot name="user"></slot>
        </p>
        <p>
            パスワード: <slot name="psd"></slot>
        </p>

        <button>ログイン</button>
        <スロット></スロット>
    </div>
</テンプレート>

// <login-component> を使用する
        <h2>私はスロットに配信されるコンテンツです</h2>

        <テンプレート v-slot:user>    
            <!-- ここのすべてのコンテンツは name="user" スロットに挿入されます -->
            <div>
                123
            </div>
        </テンプレート>


        <input slot="psd" type="password" placeholder="この要素は name=psd スロットに挿入されます">
        <コンポーネント-a スロット="psd"></コンポーネント-a> 

</ログインコンポーネント>

知らせ

v-on や v-bind と同様に、v-slot にも省略形があり、パラメータ (v-slot:) の前のすべてを文字 # に置き換えます。たとえば、v-slot:headerは#headerに書き換えることができます。

<ログインコンポーネント>
            <h2>私はスロットに配信されるコンテンツです</h2>

            <テンプレート #ユーザー>    
                ここにあるすべてのコンテンツは、name="user" スロット <div> に挿入されます。
                    123
                </div>
            </テンプレート>


            <テンプレート #psd>    
               <input type="password" placeholder="この要素は name=psd スロットに挿入されます">
            </テンプレート>
</ログインコンポーネント>

個人的には、スロットはプロジェクト開発ではあまり使用されず、一部の UI ライブラリの開発でよく使用されると思います。スロットについてさらに深く理解したい場合は、公式ドキュメント cn.vuejs.org/v2/guide/co… を参照してください。

フィルター

コンセプト

Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを定義できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。フィルターは、JavaScript 式の最後に「|」記号で示されて追加する必要があります。

文法

フィルターはグローバルフィルターまたはローカルフィルターをサポートします

グローバルフィルター

<div id="アプリ">
    {{str | capitalize}} // こんにちは
</div>

// 単語の最初の文字を大文字にする Vue.filter('capitalize', function (value) {
  if (!value) が '' を返す
  値 = value.toString()
  戻り値.charAt(0).toUpperCase() + value.slice(1)
})

新しいVue({
    el: '#app',
    データ: {
        文字列: 'こんにちは'
    }
})

ローカルフィルター

<div id="アプリ">
    <div v-for="(f,i) 友達の中に" :key="i">
        <h3>名前: {{f.name}} </h2>
        <p>年齢: {{f.age}}</p>
        <p>性別: {{f.sex|getSex}}</p>
    </div>
</div>

<スクリプト>
    新しいVue({
        el: '#app',
        データ: {
            友達: [{
                    名前: 'マックス',
                    性別: 0,
                    年齢: 19
                },
                {
                    名前: 'ジャック',
                    性別: 1,
                    年齢: 22
                },
                {
                    名前: 'Jacose'、
                    性別: 1,
                    年齢: 19
                },
                {
                    名前: 'ティム',
                    性別: 1,
                    年齢: 18
                },
                {
                    名前: 'ジミー'、
                    性別: 0,
                    年齢: 20
                },
                {
                    名前: 'トム'、
                    性別: 0,
                    年齢: 19
                },
            ]
        },
        フィルター:
            getSex(タイプ) {
                (タイプ === 0)の場合{
                    '男性'を返す
                }
                '女性'を返す
            }
        }
    })
</スクリプト>

注: filter は複数のパラメータの受け渡しをサポートしています。substr に直接渡されたパラメータは、filter メソッドの 2 番目、3 番目、… のパラメータとして順番に使用されます。

<div>{{'hello' | substr(3,4)}}</div>
<スクリプト>
{
    フィルター:
       substr(str,start,end) {
           str.substr(start,end) を返す
       } 
    }
}
</スクリプト>

練習する

指定されたテンプレートに従って、対応する構造体の時間を返すことができるフィルターを実装します。

// 例 <p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56

<p>{1599639292100 | getTemplateTimeByDate('YYYY-Md h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY 年 M 月 d 日 hh:mm')}</p> -> 2020 年 9 月 9 日 15:04

新しいVue({
    el: '#app',
    データ: {
        日付: 新しい Date().getTime()
    },
    フィルター:
        getTemplateTimeByDate(日付、テンプレート) {
            date = 新しい日付(date)

            TimeObj = {
                'Y+': date.getFullYear(),
                '(M+)': date.getMonth() + 1,
                '(d+)': date.getDate(),
                '(h+)': date.getHours(),
                '(m+)': date.getMinutes(),
                '(s+)': date.getSeconds()
            }

            for (キー in TimeObj) {
                reg = 新しい RegExp(キー) とします。

                if (reg.test(テンプレート)) {
                    console.log(正規表現$1)
                    time = TimeObj[キー]とする
                    // 現在のテンプレートの時刻が 2 桁か 1 桁かを判断します // 2 桁の時刻の場合は、先頭にゼロを追加します (1 -> 01) 
                    // 数字の場合はゼロを追加する必要はありません if (RegExp.$1.length > 1) {

                        時間 = 時間 >= 10 ? 時間 : '0' + 時間
                    }
                    テンプレート = template.replace(reg, 時間)
                }
            }
            返品テンプレート
        }
    }
})
</スクリプト>

要約する

Vue のスロットとフィルターに関するこの記事はこれで終わりです。Vue のスロットとフィルターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue でのスロットの紹介と使用
  • Vue コンポーネント スロットの使用とコンポーネント内でのメソッドの呼び出しの詳細な説明
  • Vue スロットの理解と使用
  • Vueスロットの原理と使い方の詳細な説明
  • Vueの$slotはスロットのノードインスタンスを取得します
  • vueスロットの使い方の詳しい説明
  • Vue.jsはフィルターとカスタムフィルターを毎日学習する必要があります
  • Vue フィルターと基本的な使い方
  • Vue.js -- フィルターの使用法の概要

<<:  Linuxでサーバーのハードウェア情報を表示する方法

>>:  Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明

推薦する

JavaScriptのアロー関数の特徴と通常の関数との違い

目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...

コンパイル、インストールから設定ファイルの説明まで、中国語でnginxの詳細な説明

この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...

Vue の一般的な問題と解決策の概要 (推奨)

Vue に限定されず、他の種類の SPA プロジェクトにも当てはまる問題がいくつかあります。 1....

Linux ディスク領域解放問題の概要

IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...

MySQL でトランザクションのコミットとロールバックを実装する方法の詳細な例

最近、データベース データのスケジュールされた移行を実行する必要があります。実行プロセス中に何らかの...

複数のドメイン名、ポート、IP仮想ホストに基づくNginx構成

1. タイプの導入1.1 ドメインベースの仮想ホスティングいわゆるドメイン名ベースの仮想ホストとは、...

TypeScript のマップされた型とより優れたリテラル型推論について説明します。

目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...

vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...

Dockerはコンテナポートバインディングのローカルポートを実装します

今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

CSS は Apple のスムーズなスイッチ ボタン効果を模倣します

目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...

XHTML ブロックレベルタグの概要

* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...

格納可能なセカンダリメニューを実装するための JavaScript

JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...