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

내 버튼 구성 요소:

내 양식 구성 요소:

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

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

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