私は現在、オプション API を使用して作成したコンポーネントの書き直しに取り組んでいます。コード シェアリングの観点から見ると、興味深い書き換えポイントは、モーダル ボックスの多くに、表示されるすべての場所に独自のクローズ/オープンおよびブール ロジックが付加されていることです。

私の問題は、1 つのコンポーズ可能な関数を複数のモーダル インスタンスで機能させる方法を理解するのに苦労していることです。

この非常に単純な例を考えてみましょう:

Modal.vue

useModal.ts

次に、これをコンポーネントで使用するには、次のようにします:

Component.vue

ページ上にモーダル ボックスが 1 つだけある場合はこれでまったく問題ありませんが、モーダル ボックスがいくつでも機能するようにするにはどうすればよいでしょうか?どのモーダルが切り替えられているか、開かれているかを追跡するために変数名を定義する必要があることは明らかですが、各モーダルの useModal 結合コンテンツを再作成せずにこれを実現するにはどうすればよいでしょうか?

理想的には、これと同様のことをしたいと考えています

しかし、これは機能しません(当然です)。ここで私の目標を達成する方法はありますか、それとも組み合わせた関数をどのように/いつ使用するかについて根本的な誤解を持っていますか?

このようなバリエーションをいくつか試してみました

しかし、これらはどれも私には役に立ちません。