컴포넌트 디커플링을 달성하는 올바른 방법

Question

저는 Vue 2를 사용하여 두 구성 요소 간의 통신을 다루고 있습니다. 그 중 하나는 초기, 로드 및 완료(성공 또는 실패)와 같은 상태를 가질 수 있는 버튼입니다. 버튼의 각 상태에 대해 서로 다른 상태를 표시할 수 있습니다. 텍스트, 다양한 아이콘(로드: 스핀 아이콘, 성공적인 완료: 틱, 오류 완료: x), 버튼 구성 요소를 사용하는 양식도 있습니다. 양식 제출의 현재 상태에 따라 버튼 상태를 변경하는 방법을 잘 모르겠습니다. 아래 코드를 참조하세요.

내 버튼 구성 요소:

으아악

내 양식 구성 요소:

으아악

위 코드에서는 양식 상태에 따라 버튼 상태를 변경하는 방법을 볼 수 있습니다. 버튼을 클릭하면 두 가지 기능(startLoading, includeSuccessously)이 발생하고 그런 다음 sendItemToCart에서 이 두 기능을 사용합니다.

이러한 함수를 상위 구성 요소의 메서드에 매개 변수로 전달해야 하기 때문에 두 구성 요소가 너무 많이 결합된 것 같습니다. 또한 이를 수행하는 방법에 대한 또 다른 아이디어가 있습니다. 각 버튼에 참조를 제공한 다음 상위 구성 요소의 참조를 사용하여 해당 메서드를 호출하는 것입니다. 이 아이디어는 객체 지향 프로그래밍의 "상속 대신 구성"과 약간 비슷해 보입니다. 여기서는 객체/구성 요소에 작업을 요청하지만 이 경우에는 함수를 매개 변수로 사용하지 않습니다.

글쎄요, 위의 두 가지 경우는 제가 갖고 있는 모든 버튼에 대해 변수를 만드는 것보다 나은 것 같지만 개선될 수도 있을 것 같습니다. 그래서 제가 찾고 있는 것은 어떻게 하면 구성요소를 더 잘 분리할 수 있을까요?

Answer 1

Vue 3에 대해 이야기하고 있다면(Vue 버전을 지정하지 않았으므로 Vue 2인지 확실하지 않음) 아마도 다음을 찾고 있을 것입니다. provide/inject:

https://vuejs.org/guide/comComponents/provide-inject.html

따라서 상위 구성 요소와 상위 구성 요소의 하위 항목으로만 표시될 수 있는 여러 하위 구성 요소(예: 양식 및 입력 상자)가 있는 경우 provide양식을 명시할 수 있습니다.

OP는 버튼이 다른 곳에도 나타날 수 있으므로 props와 Provide를 모두 사용해야 한다고 언급했습니다. 양식이 없으면 props를 기본 주입 값으로 사용할 수 있습니다.

양식 구성 요소에서:

으아악

버튼 구성 요소에서:

으아악

옵션 API에 맞춰 코드를 조정하세요.

Vue 2로 업데이트

OP는 Vue 2를 사용하여 답변을 수정했습니다. 그래서...

다행히 Vue 2에서도 지원됩니다provide/inject! 유일한 문제는 제공을 반응형으로 만드는 방법이었는데, 여기에서 해결된 것 같습니다:

Vue 2에서 API 제공/주입을 반응형으로 만들려면 어떻게 해야 하나요?