1、需求
2、正常写法。
按以前的经验直接开撸代码
懒是推动查文档的动力。 ——尼古拉斯 · 小平不小
3 render函数
百度或者google,搜到的render函数中全是照搬Vue官网中如何使用render函数写一个动态生成 heading 标签的组件。只能查文档 渲染函数 & JSX,文档下方有一个详细的 Babel 插件介绍。很详细的介绍了如何使用一个render函数。实现我所需要的功能代码如下:
components: {
tag: {
props: {
name: Array,
},
render: function (h) {
return (
<div>{
this.name.map(item => {
return <el-tag style={{marginBottom:'10px'}}>{item}</el-tag>
})
}
</div>
)
},
}
}
复制代码
实现的效果如下,此时已经完美实现需求。
Vue.component('tag',{
props: {
name: Array,
},
render: function (h) {
return (
<div>{
this.name.map(item => {
return <el-tag style={{marginBottom:'10px'}}>{item}</el-tag>
})
}
</div>
)
},
})
复制代码