コンポーネントのデカップリングを実現する正しい方法

Question

私は 2 つのコンポーネント (Vue 2 を使用) 間の通信を扱っています。そのうちの 1 つはボタンであり、表示されるボタンの状態ごとに、初期、読み込み、完了 (成功または失敗) などの状態を持つことができます。異なるテキスト、異なるアイコン (読み込み中: スピン アイコン、成功完了: チェックマーク、エラー完了: x)、ボタン コンポーネントを使用するフォームもあります。フォーム送信の現在の状態に基づいてボタンの状態を変更する方法がわかりません。以下のコードを参照してください。

私のボタンコンポーネント:

リーリー

私のフォームコンポーネント:

リーリー

上記のコードでは、フォームの状態に基づいてボタンの状態を変更する方法がわかります。ボタンはクリックされると 2 つの関数 (startLoading、includeSuccessful) を発行し、これら 2 つを sendItemToCart 関数で使用します。

これらの関数をパラメータとして親コンポーネントのメソッドに渡す必要があるため、これは 2 つのコンポーネントを少し結合しすぎているように思えます。また、これを行う方法については別のアイデアがあります。それは、各ボタンに ref を与え、親コンポーネントの ref を使用してそのメソッドを呼び出すことです。このアイデアは、オブジェクト指向プログラミングにおける「継承ではなく合成」に少し似ています。オブジェクト/コンポーネントに何かをするよう要求するだけですが、この場合は関数をパラメータとして取りません。

さて、上記の 2 つのケースは、ボタンごとに変数を作成するよりも優れているように思えますが、改善の余地があるようです。そこで私が探しているのは、コンポーネントをより適切に分離するにはどうすればよいでしょうか?

Answer 1

Vue 3 について話している場合 (Vue のバージョンを指定していないため、Vue 2 であるかどうかはわかりません)、おそらく provide/inject:

を探しているでしょう。

https://vuejs.org/guide/components/provide-inject.html

したがって、親コンポーネントと、その親コン​​ポーネントの子孫としてのみ表示できる多数の子コンポーネント (フォームや入力ボックスなど) がある場合、フォームの状態を 提供することができます。 :

OP は、ボタンが他の場所にも表示される可能性があるため、props と Provide の両方を使用する必要があるとコメントしました。フォームがない場合は、デフォルトの注入値として props を使用できます。

フォームコンポーネント内:

リーリー

ボタンコンポーネント内:

リーリー

コードをオプション API に調整します。

Vue 2を使用した更新

OP は Vue 2 を使用して答えを修正しました。それで...＃＃＃

幸いなことに、Vue 2 は

provide/inject もサポートしています。唯一の問題は、provide をレスポンシブにする方法でしたが、これはここで解決されたと思います:

Vue 2 Provide/Inject API をリアクティブにするにはどうすればよいですか?