Vueのコンポーネントのprops属性について詳しく説明します

Vueのコンポーネントのprops属性について詳しく説明します

今日の記事は、小道具について徹底的に学ぶのに役立ちます...

Propsは主にコンポーネントに値を渡すために使われます。外部からデータを受け取るのが役割です。data、el、refと同じレベルの設定項目です。

質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る

1. [呼び出されるコンポーネントを定義する]まず、個人情報を表示するために使用される person コンポーネントを定義します。人物の名前、性別、年齢を入力します。このコンポーネントを定義したら、他のコンポーネントがそれを呼び出すのを待つことができます。他のコンポーネントが呼び出せるようになったので、他のコンポーネントから渡される値を受け取るための props 属性を定義する必要があります。

注:コンポーネント内の名前、性別、年齢はすべて 1 つのプロパティです。3 つのプロパティをまとめたものが props です。これが props の由来です。これは prop の複数形で、複数の prop 属性のコレクションを表します。

2. [コンポーネントの呼び出し]この時点で、人物の基本情報を表示するための別の情報コンポーネントを定義し、人物コンポーネントを呼び出して情報を表示します。呼び出しは、次の図に示すように 4 つのステップに分かれています。パラメータを渡す

3. [効果を確認] データが正常に転送されました。

質問 2: 年齢に 1 歳を追加したい場合はどうすればよいでしょうか? どうすればよいでしょうか?

これに似たものを1つ追加するかもしれません

効果が得られるか見てみましょう。19になります。下の図に示すように、明らかに間違っています。渡した年齢は文字列 18 なので、1 を追加すると 18 の後にのみ連結されます。

そこで、どうやって数字を伝達するのかと尋ねる人もいました。とてもシンプルで、シンボルは 1 つだけです。

ageの前にコロンを追加するだけで、二重引用符18内のコンテンツのみが認識され、それ以外は二重引用符18が認識されます。

効果を見てください、今は成功しています。

質問 3: 年齢タイプの場合、最も取得したいデータの種類は何ですか?

数値型である必要がありますが、誰かが文字列型を渡すことを主張すると、上記に 1 を追加するなど、年齢の計算に影響します... では、どのように型を制限すればよいでしょうか?

現時点では、型を制限するときに props がオブジェクトとして使用されるため、 props は [] ではなく {} で定義できます。

以下では、3 つの属性を個別に制限します。

年齢を数値型に制限し、文字列 18 を渡すと、どのような変化が起こるでしょうか?

このとき、コンソールには、age のデータ型が一致しないことを示すエラーが報告されます。

表示には影響ありませんが、エラーが報告されます。これにより明確なヒントが得られます。受信データを標準化すると便利です。

質問 4: タイプを制限できる場合、送信する必要があるかどうかも制限できますか?

A: もちろんです。

名前は送信する必要があるが、その他は必須ではないと想定します。

タイプ属性: type:xx

必須属性:必須: true

デフォルトのプロパティ:デフォルト: xx

名前は渡さないといけないので渡さずに試してみましょう。年齢を渡さない場合は18歳とみなされます。

その結果、コンソールにもエラーが報告され、名前は必須の属性であることが示されます。年齢を渡さずに、デフォルト値が表示されました。19なのは、最初に年齢を1増やしたので、属性を制限することに成功したからです。

上記を要約すると次のようになります。

props はデータを受け取る際に、データ型の制限やデフォルト値の指定、必要性の制限も行います。

質問5: props が受け取るプロパティ値は変更できますか?

答え: いいえ

ボタンとクリックイベントを追加します

注: props 内のプロパティ値にアクセスする必要があります。これは、これを通じて見つけることができます。

結果を確認すると、ページは表示できるが、コンソールにエラーが報告されているため、変更できないことがわかります。

質問 6: props 属性値を変更する必要がある場合はどうすればよいですか?

答え: データを通じて間接的に変更する

props 属性を受け取るために、data 内の変数を再定義します。この変数に同じ名前を付けないことをお勧めします。同じ名前の場合、 props>data の優先順位で、 props 属性値が最初に取得されます。次に、HTMLで値を操作またはバインドするときに、データで新しく定義された変数を操作します。

この時点で、変更が成功し、エラーが報告されていないことがわかります。

概要: 構成項目のプロパティ

-------コンポーネントが外部からデータを受信できるようにする

データを受信する方法は 3 つあります。

(1)受け取るもの:props: ['name', 'age', 'sex']

(2)型の受け取りと制限:props: { "name": Number }

(3)制限の種類と制限の必要性のデフォルト値を指定する。

    小道具:{
        "名前":{
            タイプ:文字列、
            必須:true
        },
        "年":{
            タイプ:数値、
            デフォルト:18
        },
        「セックス」:{
            タイプ:文字列、
            デフォルト: '男性'
        },
    },

注意: props は読み取り専用です。基盤となる Vue は props への変更を検出します。変更を加えると、コンソールにエラーが報告されます。変更する必要がある場合は、コピーを data にコピーし、data を通じてデータを変更します。

これで、vue コンポーネントの props 属性に関するこの記事は終了です。vue コンポーネントの props 属性の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 親子コンポーネント値転送における props 使用の詳細の簡単な分析
  • Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明
  • Vue のコンポーネントの props 使用方法の詳細な説明
  • Vue3 での props コンポーネントの抽出

<<:  MySQL分離の使用手順を読む

>>:  ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

推薦する

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

MySQL で期限切れのデータレコードを定期的に削除する簡単な方法

1. MySQL に接続してログインしたら、まず MySQL でイベント機能が有効になっているかどう...

Vueカスタム命令とその使用方法の詳細な説明

目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...

ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法

実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...

js で 0ms 遅延タイマーを実装するいくつかの方法

目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

JavaScript でよく使われる 5 つのオブジェクト

目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

ハイパーリンクに関するいくつかの質問

<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...

Linux でのマルチスレッドおよびマルチプロセス クラッシュのシミュレーションに関する簡単な説明

結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...

Server-U 14バージョンのインストールと使用方法

Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...