Générer des mises en page dynamiques dans Vue à l'aide de composants récursifs

L'inspiration pour cet article vient d'une implémentation récente que j'ai réalisée pour créer des mises en page dynamiques sur le front-end basé sur Vue.

Supposons que votre point de terminaison d'API renvoie une présentation YAML comme ci-dessous.

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

Nous nous attendrions à une mise en page comme celle ci-dessous de cette expression YAML.

Donc, cela facilite le travail, nous analyserons cette structure YAML et générerons un objet JSON. J'ai utilisé le package yaml.

npm install yaml

Ensuite, nous pourrions l'importer et exécuter l'analyseur.

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

Pour que cela fonctionne, nous devons créer un modèle Vue récursif et un composant qui peut s'appeler de manière récursive lorsqu'il rencontre des lignes imbriquées. De cette façon, la structure gérera dynamiquement les mises en page profondément imbriquées comme celle que j'ai fournie.

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

Maintenant, nous pouvons utiliser ce composant RecursiveRow dans votre composant parent pour gérer la mise en page de niveau supérieur.

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

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

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

C'est tout. Si vous avez des questions, veuillez laisser un commentaire ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!