Vue编写动态组件实践（render函数的使用心得）

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>
复制代码

还有优化的地方，欢迎大家拍砖。

：比心