本文详细介绍了如何在Vue.js中使用动态组件来渲染JSON数据内容。通过component组件和`:is`属性，可以根据数据中的component字段动态加载Foo和Bar等组件。在App.vue中引入并声明这些组件，实现内容的灵活展示。同时，文章还提及了Vue.js应用的性能优化技巧。
使用Vue.js，渲染动态组件非常容易，我们可以根据其名称来使用对应的组件和布局来渲染内容。
下边是一个需要渲染内容的JSON数据
json数据content里边有个body数组，每个元素中都有一个component的字段，这个字段决定了使用哪个组件去渲染。
循环输出content body数组
使用动态组件
翻阅到Vue官方文档中动态组件那里，知道我们需要使用component组件，然后把组件名字传递给它的:is属性，这样就可以渲染出名字对应的组件内容。
创建组件，并在使用之前引入，声明
我们创建两个组件，一个是components/Foo, 另一个是components/Bar。下边以Foo组件为例：
创建之后，就可以引入到App.vue组件中，可以组件中声明，也可以全局声明Foo组件。
App.vue
最终效果
相关文章：
如何在Vue Router中应用中间件
构建Vue.js组件的10个技巧
Vue.js应用性能优化一
Vue.js应用性能优化二
Vue.js应用性能优化三
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
