Vue.js 创建基于多个组件的动态 AJAX 响应

Question

我正在尝试使用动态服务器响应创建 SPA。例如返回的数据是：

components: [
{
    name: "Parent1",
    data: {...},
    children: [
        {
           component: {
               name: "Child1",
               data: {...},
               children: []
            }
        },
        {
            component: {
                name: "Child2",
                data: {...},
                children: []
            }
        }
    ]
},
{
    name: "Parent2",
    data: {...},
    children: [
        {
           component: {
               name: "Child1",
               data: {...},
               children: []
            }
        }
    ]
}    
]

我想做的是分别定义父组件和子组件。即组件列表：

- Parent : Common parent with data1 and data2 displayed, instantiates Children   as needed         
- Child1
- Child2

有人对最佳方法有任何想法吗？

Answer 1

你可以这样做：

父级APIURL:www.example.com/api/parent/parent_id（通常称为API端点）

服务器响应：

{
    data: {
        type: "Parent",
        id: "parent123",
        name: "Parent 1",
        children_ids: ["c1", "c2", "c3"]
    },
    included: [
        {type: "Child", id: "c1", name: "Child 1", ...},
        {type: "Child", id: "c2", name: "Child 2", ...},
        {type: "Child", id: "c3", name: "Child 3", ...},
    ]
}

注：

每个数据项都需要有一个 ID。您的示例没有在任何地方提及 ID。
此示例大致遵循 http://jsonapi.org/ 中的指南，但您可以自由遵循适合您的任何内容，只要您为团队记录下来即可。
此示例尝试加载 response.data 对象中的实际数据，以及 response.included 数组中的 side-loads 子数据，从而保持 parent 和 child分离。您需要在 Vue.js 中处理此响应约定，最好使用 Vuex 作为存储。

如果您打算遵循此示例，您还需要确保子 API 端点处于活动状态并且可以独立访问。如果您的 Vue 应用程序直接使用子 URL.

加载，这将很有帮助

样本子 API 端点：

www.example.com/api/parent/parent_id/child/child_id（如果 child_id 是 NOT 唯一）
www.example.com/api/child/child_id（如果 child_id 是唯一的）

Answer 2

您是指 component 和 is 吗？

<component :is="componentType"></component>

这是Vue.js

的动态组件功能

一个非常简单的例子：http://codepen.io/CodinCat/pen/ZLjrRX?editors=1010

在此处查看文档：https://vuejs.org/v2/guide/components.html#Dynamic-Components

Vue.js 创建基于多个组件的动态 AJAX 响应

Vue.js create dynamic AJAX response based multiple components

vue.js

vue-component

vuejs2