Menjana reka letak dinamik dalam Vue menggunakan komponen rekursif

Inspirasi untuk artikel ini datang daripada pelaksanaan terbaru yang saya lakukan untuk membina reka letak dinamik pada bahagian hadapan berasaskan Vue.

Anggapkan titik akhir API anda mengembalikan reka letak YAML seperti di bawah.

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

Kami menjangkakan reka letak seperti di bawah daripada ungkapan YAML ini.

Jadi, ini memudahkan untuk digunakan, kami akan menghuraikan struktur YAML ini dan menjana objek JSON. Saya menggunakan pakej yaml.

npm install yaml

Kemudian, kita boleh mengimportnya dan menjalankan parser.

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

Untuk membuat ini berfungsi, kita perlu mencipta templat Vue rekursif dan komponen yang boleh memanggil dirinya secara rekursif apabila menemui baris bersarang. Dengan cara ini, struktur akan mengendalikan reka letak bersarang dalam secara dinamik seperti yang saya sediakan.

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

Kini, kami boleh menggunakan komponen RecursiveRow ini di dalam komponen induk anda untuk mengendalikan reka letak peringkat teratas.

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

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

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

Itu sahaja. Jika anda mempunyai sebarang soalan, sila tinggalkan komen di bawah.

Atas ialah kandungan terperinci Menjana reka letak dinamik dalam Vue menggunakan komponen rekursif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!