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つの解決策を詳しく解説

推薦する

Maven プロジェクトのリモート デプロイメント && Tomcat を使用してデータベース接続を構成する方法

1つ。 tomcat を使用したリモート展開1.1 発生した問題:プロジェクトでは、サードパーティの...

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...

Dockerfile 内の予約語命令の解析処理

目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...

Linuxルートの初期値を設定する方法の簡単な分析

Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...

ろうそくを溶かす(水滴)サンプルコードを実現する純粋な CSS

成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

MySQL の行レベルロックの詳細な例

序文ロックは、複数のスレッドを実行するときにリソースへのアクセスを強制的に制限するために使用される同...

テキストエリアの残りの単語数を動的に取得する方法

仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き...

JSでES6クラスの使い方をすぐにマスター

1. どのように構築しますか? es5 でクラスを構築する一般的な方法を確認しましょう。まず、es5...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

パフォーマンス負荷診断にMySQLシステムデータベースを使用する方法

ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...

CSS3 で QR コードスキャン効果を実装する例

オンラインプレビューhttps://jsrun.pro/AafKp/まず効果を見てみましょう:最初の...

IDEA で mysql8.0.3 と mybatis-generator を使用する際に発生するバグ

1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...