如何基于vue-render函数实现v-model

最近有小伙伴问我，render函数如何封装，今天刚好业务需要有这样一个功能

<script>
export default {
   name: "HtmlNodeTmp",
   props: {
      type: [String],
      value: [String, Number, Boolean]
   },
   render(createElement) {
      let self = this;
      let html = [];
      if (this.type === 'radio') {
          // 此处可以进一步封装，本示列代码仅做演示
         let radio_1 = createElement('vxe-radio', {
            props: {
               value: this.value,
               label: "1",
            },
            attrs: {
               content: '招标文件',
               name: "n1",
            },
            on: {
               change: function (event) {
                  self.$emit('input', event.label)
               }
            }
         })
         let radio_2 = createElement('vxe-radio', {
            props: {
               value: this.value,
               label: "2",
            },
            attrs: {
               content: '资审文件',
               name: "n1",
            },
            on: {
               change: function (event) {
                  self.$emit('input', event.label)
               }
            }
         })
         html.push(radio_1)
         html.push(radio_2)
      }
      
      if (this.type === 'select') {
         let option = [];
         let items = [
            {label: '请选择使用范围', value: '1'},
            {label: '可多选，数据字典配置', value: '2'},
            {label: '示例：工程咨询，施工', value: '3'}
         ]
         for (const itemsKey in items) {
            let item = createElement('vxe-option', {
               props: {
                  value: items[itemsKey].value
               },
               attrs: {
                  label: items[itemsKey].label,
                  key: items[itemsKey].value
               }
            },)
            option.push(item);
         }
         let select = createElement('vxe-select', {
            props: {
               value: this.value,
            },
            attrs: {
               placeholder: '选择适用范围'
            },
            on: {
               change: function (event) {
                  self.$emit('input', event.value)
               }
            }
         }, option)
         html.push(select)
      }
      
      if (this.type === 'input') {
         let input = createElement('vxe-input', {
            props: {
               value: this.value,
            },
            attrs: {
               placeholder: '请填写'
            },
            on: {
               change: function (event) {
                  self.$emit('input', event.value)
               }
            }
         })
         html.push(input)
      }
      
      return createElement('div', html)
   }
}
</script>

使用

结果

注意点

学习render函数的使用