Generieren dynamischer Layouts in Vue mithilfe rekursiver Komponenten

Die Inspiration für diesen Artikel stammt von einer kürzlich durchgeführten Implementierung, mit der ich dynamische Layouts auf einem Vue-basierten Frontend erstellt habe.

Angenommen, Ihr API-Endpunkt gibt ein YAML-Layout wie unten zurück.

---
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

Wir würden von diesem YAML-Ausdruck ein Layout wie das folgende erwarten.

Um die Arbeit damit zu vereinfachen, analysieren wir diese YAML-Struktur und generieren ein JSON-Objekt. Ich habe das Yaml-Paket verwendet.

npm install yaml

Dann könnten wir es importieren und den Parser ausführen.

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

Damit dies funktioniert, müssen wir eine rekursive Vue-Vorlage und eine Komponente erstellen, die sich selbst rekursiv aufrufen kann, wenn sie auf verschachtelte Zeilen stößt. Auf diese Weise verarbeitet die Struktur dynamisch tief verschachtelte Layouts wie das von mir bereitgestellte.

<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>

Jetzt können wir diese RecursiveRow-Komponente in Ihrer übergeordneten Komponente verwenden, um das Layout der obersten Ebene zu verwalten.

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

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

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

Das ist es. Wenn Sie Fragen haben, hinterlassen Sie bitte unten einen Kommentar.

Das obige ist der detaillierte Inhalt vonGenerieren dynamischer Layouts in Vue mithilfe rekursiver Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!