Vue のどの props が親コンポーネント メソッドに渡されますか?

vue では、props は親コンポーネントのメソッド (データ) を子コンポーネントに渡します。親コンポーネントによって送信されるフォームでは、値が属性の形式で子コンポーネントにバインドされ、子コンポーネントは属性 props を使用して親コンポーネントによって渡された値を受け取ります。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

親コンポーネントから子コンポーネントへのステップ:

まずここで定義します。このケースと比較すると、App.vue が親コンポーネント、2 番目のモジュールです。vue はサブコンポーネント。

1. まず、親コンポーネントで値を定義し、すべての子コンポーネントで共有する必要があります。したがって、値は親コンポーネントのデータで定義する必要があります。

次に、親コンポーネントには子コンポーネントとの収束点が必要です。コンポーネント: つまり、親コンポーネント内での呼び出し、登録、参照サブコンポーネント:

呼び出し:

Register:

# # 引用:

3. 次に、親コンポーネントの値バインディングをサブコンポーネントに配置できます:

ここでは 2 つの値をバインドしました。1 つは配列で、もう 1 つは文字列です。

特記事項:

一般に、親から子への受け渡しは、次の 3 つの手順で行われます。親コンポーネントで値を定義し、子コンポーネントを呼び出して参照し、そして、参照されたタグ「値をサブコンポーネントに渡す」を追加します。

ただし、渡す値をバインドするには v-bind: を使用する必要があることに注意してください。v-bind を使用せずにラベルに値を直接配置すると、HTML ノード属性として解析されます。

4. 最後に、子コンポーネントは、親コンポーネントによって渡された値を内部で受け入れる必要があります: 受信する小道具 (小さな小道具):

もう一つの受け方：ここはストリング巻きに注意、ここはピットを踏む。

具体的な受信方法については、公式ドキュメントを参照してください~

5. このようにして、親コンポーネントの値を子コンポーネント内で直接使用できます。成分。

ただし、注意すべき点があります。

サブコンポーネントが受け取る親コンポーネントの値は、参照型の 2 つのタイプに分けられます。および通常の型

• 一般的な型: String、Number、Boolean、Null

• 参照型: Array (配列)、Object (Object)

このうち、共通型はサブコンポーネント内で変更でき、他の兄弟サブコンポーネントでも呼び出される親コンポーネントからの値には影響しません。 ,

ただし、子コンポーネントで参照型の値が変更されると、親コンポーネントも変更され、その結果、参照型を参照する他のサブコンポーネントの値も変更されます。変更された値もそれに応じて変更されます。特別なリクエストがない限り、これは行わない方が良いでしょう。

親コンポーネントから子コンポーネントに渡される値は、子コンポーネント内で変更してはなりません。これは、データがパブリックであり、変更されると、参照されているすべての子コンポーネントも変更されるためです。

最初にエフェクト ページを見てみましょう:

左側のリスト バーは親コンポーネントの値を参照する最初のサブコンポーネントで、右側は親コンポーネントの値を参照する 2 番目のサブコンポーネントです。それらはすべて同じ情報を持っています:

開発ツールでも明らかな 6 つのデータがあります:

比較する最後のデータに注目してください。右側の領域の最初の青いボタンをクリックすると、一連のデータが欠落します。もちろん、両側が同時に欠落します。

同様に、開発ツールを見ると、アプリ コンポーネントのデータが 1 つ欠落しています。

ただし、文字列、数値、およびブール値を渡す場合、1 つのコンポーネントを変更しても、他のコンポーネントの情報には影響しません。それは問題ではありません。

2 番目の青いボタンをクリックすると、2 番目のサブコンポーネントのタイトルのみが変更され、最初のコンポーネントは変更されませんでした。

試した後、値は変更されましたが、Vue は次の警告をポップアップ表示しました:

警告: 親コンポーネントがre- レンダリング時に、この値は上書きされます。代わりに、ピラーベースのデータまたは計算されたプロパティを使用してください。

公式 Web サイトの声明:

関連する推奨事項: 「vue.js チュートリアル 」

以上がVue のどの props が親コンポーネント メソッドに渡されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。