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はシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法

目次概要方法1: params経由でパラメータを渡す方法2: クエリを通じてパラメータを渡す方法3:...

Spark SQL の 4 つの一般的なデータ ソースの詳細な説明

汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

MySqlエスケープの詳細な使用例

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

Vue 3.0 カスタムディレクティブの使い方

目次1. カスタム指示1. グローバルカスタム指示を登録する2. グローバルカスタム指示を使用する3...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

altとtitleの違いの詳しい説明

これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...

moment.jsの時間と日付の処理の詳細な説明

月曜日から日曜日の時間形式の変換(Y --- 年 M --- 月 D--- 日) : : : : :...

Windows サーバー ポートを開きます (例としてポート 8080 を使用します)

ポートとは何ですか?私たちが通常参照するポートは、物理的な意味でのポートではなく、具体的には TCP...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

Vue uniapp はセグメンター効果を実現します

この記事では、セグメンター効果を実現するためのvue uniappの具体的なコードを参考までに共有し...

ウェブサイトのパフォーマンスを向上させるために画像を最適化する方法

目次概要画像圧縮とはJPEG/JPG JPGの利点JPGの使用シナリオJPGの欠点MozJPEG を...