スロットスロットとは何ですか?コンセプト 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linuxでサーバーのハードウェア情報を表示する方法
>>: Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明
目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...
この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...
Vue に限定されず、他の種類の SPA プロジェクトにも当てはまる問題がいくつかあります。 1....
IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...
最近、データベース データのスケジュールされた移行を実行する必要があります。実行プロセス中に何らかの...
1. タイプの導入1.1 ドメインベースの仮想ホスティングいわゆるドメイン名ベースの仮想ホストとは、...
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...
この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...
* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...
JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...
脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...
前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...