VueJS 动态内容

Question

我对 Vue 的世界还很陌生，所以我一直在努力完成手头的任务。

让我解释一下它应该做什么：
所以我们有一个来自我们的 API 的 JSON 结构，我们的想法是创建一个动态的“内容组件”，它将从 JSON 获取数据并告诉组件如何它将构建布局。

我创建了动态组件，可以正确加载来自 API 的结构，如下图所示：

Content diagram

所以假设我们有 2 个部分，一个有一个简单的表单（照片中的左侧部分），另一个部分有一个 “列表组件”，请参见代码：

这是我的“内容组件”：

 <template>
    <main class="dynamic-component" v-if="structure.view">
        <ContentHeader v-if="structure.view.actions" :actions="structure.view.actions"></ContentHeader>
        <ContentBody :structure="structure" :key="componentKey" :componentKey="componentKey" @force-render="forceRerender"></ContentBody>
    </main>
</template>

“ContentBody”在这里我解析了来自 JSON 的结构，这部分是我使用“列表组件”创建部分的地方：

<template v-if="section.url" v-slot:card-body>
  <Content :key="componentKey" :targetPath="section.url">
  </Content>
</template>

又调用了父组件（Content），因为Content是我之前说的动态组件，targetPath是从JSON取数据，这是返回数据构建一个“列表组件” ".

像这样： layout

我的问题是，当 List/Form 组件具有要触发的操作（查看、编辑...）时，我如何才能在组件“内部”触发它们并且 仅呈现 SECTION 而不是整个页面？

Answer 1

我不太明白你的问题，但我想你需要：动态组件 https://v2.vuejs.org/v2/guide/components-dynamic-async.html

或者带有条件 v-if 的简单调用组件和计算

VueJS 动态内容

VueJS dynamic content

vue.js

vue-router

vuex

vuejs3