현재 Options API를 사용하여 작성한 구성 요소를 다시 작성하는 중입니다. 코드 전단 관점에서 볼 때 흥미로운 재작성 포인트는 많은 모달 상자가 표시되는 모든 곳에 자체 닫기/열기 및 부울 논리가 연결되어 있다는 것입니다.

제 문제는 하나의 구성 가능한 함수를 여러 모달 인스턴스에서 작동하게 만드는 방법을 찾는 데 어려움을 겪고 있다는 것입니다.

다음의 아주 간단한 예를 들어보세요:

Modal.vue

useModal.ts

그런 다음 일부 구성 요소에서 사용하려면 다음을 수행할 수 있습니다.

组件.vue

페이지에 모달이 하나만 있는 경우에는 문제가 없지만 여러 모달에 대해 어떻게 작동하게 만들 수 있나요? 분명히 어떤 모달이 전환/열려 있는지 추적하기 위해 변수 이름을 정의해야 하지만, 각 모달에 대해 useModal결합된 콘텐츠를 다시 만들지 않고 이를 달성하려면 어떻게 해야 합니까?

이상적으로는 이와 비슷한 일을 하고 싶습니다

하지만 그건 (분명히) 작동하지 않습니다. 여기에 내 목표를 달성할 수 있는 방법이 있습니까? 아니면 결합된 기능을 언제/어떻게 사용해야 하는지에 대한 근본적인 오해가 있습니까?

저는 이와 같은 몇 가지 변형을 시도했습니다

하지만 이 중 어느 것도 나에게는 효과가 없습니다.