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 つあります。

（１）受け取るもの：props: ['name', 'age', 'sex']

（２）型の受け取りと制限：props: { "name": Number }

（３）制限の種類と制限の必要性のデフォルト値を指定する。

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

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

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