相信大家已经学会了如何使用VUE来渲染动态组件,但是在传递参数的时候只能传递一个简单的变量,这一次我来介绍一下如何传递一个对象,直接上代码:
- 修改我们之前的自定义组件,加入对象参数
测试组件 {{ dataId }}
export default {
props: {
dataId: {
type: String,
default: ''
},
appData: {
type: Object,
default: {}
}
}
}
- 核心渲染组件也需要做一些修改,如下
binddata: {
type: Object,
default: function() {
return { };
}
}
- 编写测试组件
import comrender from './render'
export default {
components: {
comrender: comrender
},
data() {
return {
mydata: { id: 1, name: '测试', content: '测试内容' },
htmltemplate: '
}
}
};
有兴趣的朋友可以自行测试看看效果(如果想要完整源码可以私信我)。目前为止动态组件基本已经比较完善了,相信对于一些有做动态页面需求的小伙伴有一定的帮助,小编也在尝试做个动态页面生成的工具(针对内容显示类网站,比如CMS前端或者图表可视化。拖拖拽拽就能把网页组织好)。如果有需要的话,我会把相关的技术和代码奉献给大家的,希望大家支持我哦!