专栏首页前端知否如何使用Vue.js渲染JSON中定义的动态组件

如何使用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

最终效果


本文分享自微信公众号 - 前端知否(qianduanzhifou)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 构建Vue.js组件的10个技巧

    Vue.js提供了两种加载组件的方法:一种在Vue实例全局,另一种在组件级别。两种方法都有其自身的优点。

    前端知否
  • 使用React Hooks进行状态管理 - 无Redux和Context API

    现在,我们将探索和开发一个自定义Hook来管理全局状态 - 比Redux更容易使用的方法,并且比Context API更高效。

    前端知否
  • 以编程方式创建Vue.js组件实例

    最近参与了一个Vue.js项目,项目中需要能够以编程方式创建组件。通过编程,意思是使用JavaScript创建和插入组件,而无需在模板中编写任何内容。

    前端知否
  • 浅入深出Vue:组件

    这三部分会在接下来的章节中一一实践,在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件之前应该要注意的地方。

    若羽
  • 腾讯Android研发岗必刷真题:说下组件之间的跳转和组件通信原理机制

    今天则会从更小细粒度入手,主要讲讲在组件化架构下组件与组件之间通信机制是如何、包括所谓的UI跳转,其实也是组件化通信,只不过它稍微特殊点,单独抽取出来而已。学习...

    Android技术干货分享
  • Vue父子组件通信

    Vue开发,父子组件之间通信很常用,有传数据的,有调用方法的,有子组件操作父组件,也有父组件操作子组件,今天就简单说一下几个父子组件之间通信的方法。

    wade
  • Vue组件嵌套时生命周期触发的顺序是什么?

    使用过 Vue 的大家,对于生命周期一定都很熟悉,在官方文档一开始,就给我们介绍了 Vue 的生命周期有哪些,是怎么样的顺序。这个难不倒大家。

    歪马
  • Vue中组件最常见通信的方式

      父组件通过prop的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。

    前端迷
  • Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性:

    最靓的崽
  • 基于 React 的可视化编辑平台实践

    前段时间发在朋友圈的一句话:各种自主搭建的平台,想起好多年各种DIY博客,行业门户网站,本质不变,变的是实现的手段了

    黄泽杰

扫码关注云+社区

领取腾讯云代金券