如何使用Vue.js渲染JSON中定义的动态组件

使用Vue.js，渲染动态组件非常容易，我们可以根据其名称来使用对应的组件和布局来渲染内容。

下边是一个需要渲染内容的JSON数据

json数据content里边有个body数组，每个元素中都有一个component的字段，这个字段决定了使用哪个组件去渲染。

循环输出content body数组

使用动态组件

翻阅到Vue官方文档中动态组件那里，知道我们需要使用component组件，然后把组件名字传递给它的:is属性，这样就可以渲染出名字对应的组件内容。

创建组件，并在使用之前引入，声明

我们创建两个组件，一个是components/Foo, 另一个是components/Bar。下边以Foo组件为例：

创建之后，就可以引入到App.vue组件中，可以组件中声明，也可以全局声明Foo组件。

App.vue

最终效果