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

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

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

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

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

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