1:背景
今天有个新的需求,说页面组件的顺序需要根据后端返回数据的数据结构来排序,再次浏览了一次vue官网,找到了解决方案。
2:实现
先看我自己模拟的一个后台返回的数据:
text2:{
title:"it's text2"
},
text1:{
title:"it's text1"
},
text4:{
title:"it's text4"
},
text3:{
title:"it's text3"
}
复制代码
我的项目有四个组件Text1.vue,Text2.vue,Text3.vue,Text4.vue;我需要它们按照我模拟的数据结构进行显示,我自己的实现如下:
首先要有一个容器来包含组件显示顺序逻辑,于是我添加了一个容器组件AutoOrder.vue,到此得到的目录结构如下:
common
AutoOrder.vue //容器
data.js //模拟数据
Text1.vue
Text2.vue
Text3.vue
Text4.vue复制代码
在AutoOrder.vue中书写代码如下:
<script>
import TestOne from './Test1'
import TestTwo from './Test2'
import TestThree from './Test3'
import TestFour from './Test4'
export default {
render(h){
return h('div',
Object.keys(this.vdata).map((e) => {
if(e === 'text1'){
return h(
'test-one',
{
props:{
listData:this.vdata[e]
}
}
)
}else if(e === 'text2'){
return h(
'test-two',
{
props:{
listData:this.vdata[e]
}
}
)
}else if(e === 'text3'){
return h(
'test-three',
{
props:{
listData:this.vdata[e]
}
}
)
}else if(e === 'text4'){
return h(
'test-four',
{
props:{
listData:this.vdata[e]
}
}
)
}
})
)
},
props:{
vdata:{
type:Object
}
},
components:{
TestOne,
TestTwo,
TestThree,
TestFour
}
}
</script>
复制代码
这里要说明一下,这个.vue文件中没有template标签的,因为模板部分已经被render函数取代了。
然后在引用autoOrder.vue组件的地方传入后端返回的值:
<auto-order :vdata="mydata"></auto-order>
复制代码
还有优化的地方,欢迎大家拍砖。
:比心
所有评论(0)