再帰コンポーネントを使用して 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 中国語 Web サイトの他の関連記事を参照してください。