Vue 3의 단일 스크립트 태그에 있는 여러 구성 가능한 인스턴스

Question

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

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

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

Modal.vue

으아아아 으아아아

useModal.ts

으아아아

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

组件.vue

으아아아 으아아아

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

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

으아아아 으아아아

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

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

으아아아

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

Answer 1

객체 구조 분해 중에 구성 가능한 함수의 반환 값 이름을 다음과 같이 다시 할당할 수 있습니다.

으아악

추적할 모달의 상태를 구별하는 데 충분합니다.

작업 예시: https://codesandbox.io/s/vue-3-composition-destructuring-fts2x9