使用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应用性能优化三