이 기사의 영감은 Vue 기반 프런트엔드에서 동적 레이아웃을 구축하기 위해 수행한 최근 구현에서 비롯되었습니다.

API 엔드포인트가 아래와 같은 YAML 레이아웃을 반환한다고 가정해 보겠습니다.

---
row:
  - col: 12
    row:
      - col: 12
        component_id: 1
  - col: 12
    row:
      - col: 6
        component_id: 2
      - col: 6
        row:
          - col: 12
            component_id: 3
          - col: 12
            component_id: 4

이 YAML 표현식에서 아래와 같은 레이아웃이 예상됩니다.

따라서 이 작업을 쉽게 수행할 수 있도록 이 YAML 구조를 구문 분석하고 JSON 개체를 생성하겠습니다. yaml 패키지를 사용했습니다.

npm install yaml

그런 다음 이를 가져와서 파서를 실행할 수 있습니다.

import YAML from 'yaml'
const jsonObject = YAML.parse(yaml_struct)

이 작업을 수행하려면 재귀적인 Vue 템플릿과 중첩된 행을 만날 때 재귀적으로 호출할 수 있는 구성 요소를 만들어야 합니다. 이런 식으로 구조는 내가 제공한 것과 같이 깊게 중첩된 레이아웃을 동적으로 처리합니다.

이제 상위 구성 요소 내에서 이 RecursiveRow 구성 요소를 사용하여 최상위 레이아웃을 처리할 수 있습니다.

그렇습니다. 궁금하신 점은 아래 댓글로 남겨주세요.