今日の記事は、小道具について徹底的に学ぶのに役立ちます... 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つの解決策を詳しく解説
1つ。 tomcat を使用したリモート展開1.1 発生した問題:プロジェクトでは、サードパーティの...
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...
Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...
成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...
この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...
効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...
序文ロックは、複数のスレッドを実行するときにリソースへのアクセスを強制的に制限するために使用される同...
仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き...
1. どのように構築しますか? es5 でクラスを構築する一般的な方法を確認しましょう。まず、es5...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
ある達人がかつて、自分の妻のことを知るのと同じくらい、自分が管理するデータベースのことを知るべきだと...
オンラインプレビューhttps://jsrun.pro/AafKp/まず効果を見てみましょう:最初の...
1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...
CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...