私は 2 つのコンポーネント (Vue 2 を使用) 間の通信を扱っています。そのうちの 1 つはボタンであり、表示されるボタンの状態ごとに、初期、読み込み、完了 (成功または失敗) などの状態を持つことができます。異なるテキスト、異なるアイコン (読み込み中: スピン アイコン、成功完了: チェックマーク、エラー完了: x)、ボタン コンポーネントを使用するフォームもあります。フォーム送信の現在の状態に基づいてボタンの状態を変更する方法がわかりません。以下のコードを参照してください。
私のボタンコンポーネント:
リーリー私のフォームコンポーネント:
リーリー上記のコードでは、フォームの状態に基づいてボタンの状態を変更する方法がわかります。ボタンはクリックされると 2 つの関数 (startLoading、includeSuccessful) を発行し、これら 2 つを sendItemToCart 関数で使用します。
これらの関数をパラメータとして親コンポーネントのメソッドに渡す必要があるため、これは 2 つのコンポーネントを少し結合しすぎているように思えます。また、これを行う方法については別のアイデアがあります。それは、各ボタンに ref を与え、親コンポーネントの ref を使用してそのメソッドを呼び出すことです。このアイデアは、オブジェクト指向プログラミングにおける「継承ではなく合成」に少し似ています。オブジェクト/コンポーネントに何かをするよう要求するだけですが、この場合は関数をパラメータとして取りません。
さて、上記の 2 つのケースは、ボタンごとに変数を作成するよりも優れているように思えますが、改善の余地があるようです。そこで私が探しているのは、コンポーネントをより適切に分離するにはどうすればよいでしょうか?
P粉0236500142023-09-15 09:27:59
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 をリアクティブにするにはどうすればよいですか?