재귀 구성 요소를 사용하여 Vue에서 동적 레이아웃 생성

이 기사의 영감은 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 템플릿과 중첩된 행이 발견될 때 재귀적으로 호출할 수 있는 구성 요소를 만들어야 합니다. 이런 식으로 구조는 내가 제공한 것과 같이 깊게 중첩된 레이아웃을 동적으로 처리합니다.

<template>
    <v-row>
        <template v-for="col in row">
            <v-col :cols="col.col">
                <template v-if="col.component_id">
                    <ComponentWantToRender :col="col"></ComponentWantToRender>
                </template>

                <template v-if="col.row">
                    <RecursiveRow :row="col.row"></RecursiveRow>
                </template>
            </v-col>
        </template>
    </v-row>
</template>

<script setup>
import { defineProps } from 'vue';
import RecursiveRow from './RecursiveRow.vue';
defineProps({
    row: Array,
});
</script>

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

<template>
  <RecursiveRow :row="jsonObject"></RecursiveRow>
</template>

<script setup>
import RecursiveRow from './RecursiveRow.vue';

defineProps({
  jsonObject: Array,
});
</script>

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

위 내용은 재귀 구성 요소를 사용하여 Vue에서 동적 레이아웃 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!