今日の記事は、小道具について徹底的に学ぶのに役立ちます... Propsは主にコンポーネントに値を渡すために使われます。外部からデータを受け取るのが役割です。data、el、refと同じレベルの設定項目です。 質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る1. [呼び出されるコンポーネントを定義する]まず、個人情報を表示するために使用される person コンポーネントを定義します。人物の名前、性別、年齢を入力します。このコンポーネントを定義したら、他のコンポーネントがそれを呼び出すのを待つことができます。他のコンポーネントが呼び出せるようになったので、他のコンポーネントから渡される値を受け取るための props 属性を定義する必要があります。
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増やしたので、属性を制限することに成功したからです。
質問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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説
目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...
1. MySQL に接続してログインしたら、まず MySQL でイベント機能が有効になっているかどう...
目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...
実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...
目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...
MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...
目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...
はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...
表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...
1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...
<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...
導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...
結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...
Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...