각 하위 요소에 래퍼를 추가하는 Vue 3 작업

Question

아래와 같은 양식 구성 요소가 있습니다.

으아악

각 하위 항목 주위에 래퍼 div를 적용하려면 FormComponent가 필요합니다

위 코드에서 FormComponent의 출력은 다음과 같아야 합니다.

으아악

Answer 1

해결 방법은 다음과 같습니다.

으아아아 으아아아

FormComponent.vue

으아아아

---

이것은 댓글에서 제안한 내용을 실제 데모로 반복하여 $slots.default()내용을 살펴보는 것입니다.

템플릿 구문으로 논리를 작성하는 것을 선호한다면 그것이 올바른 방법이며 나는 그것에 아무런 문제가 없다고 생각합니다.

저는 (보통) 템플릿 구문을 최소한으로 유지하는 경향이 있기 때문에 개인적으로 첫 번째 접근 방식을 선호합니다. 개체 또는 매핑 구조에 구성 요소를 유지하면 다음과 같은 작업을 미세하게 제어하고 자동화할 수 있습니다.

• 확인
• 이벤트 관리
• 구성 개체의 동적 기본값 적용
• 브라우저/장치 예외 처리

제가 선호하는 것은 아마도 비즈니스 로직이 일반적으로 객체에 저장되는 구성 중심 환경에서 많은 작업을 하는 것입니다. 템플릿 구문으로 작성하는 데는 아무런 문제가 없지만 전반적으로 제한적입니다.