用json写vue前端，更容易让后端接受

本文章主要是讲解如何把定义好的json格式的数据渲染成前端页面

需求： 以往的写前端页面都是标签的形式，vue也不例外，这就导致后端不是很好的理解，因为java和js还是比较相似的，但是和html就相差甚远了，这时就需要把html变成大家都熟悉的数据格式：json

分析： 基于vue框架的开发，无论是组件还是元素，无非以下几种形式： 1、标签名 2、属性和属性值 3、原生属性，style和class等 4、指令 5、事件 6、插槽 7、子集 对应json数据详解（基础版）

        {
            componentName:'',// 标签名/组件名
            attrs:{...},// 属性对象集合
            nativeAttrs:{},//原生属性
            syncAttrs:{},// 同步属性
            renderAttrs:{},// 页面每次刷新都更新的属性
            linkageAttrs:{},// 需要响应式联动的属性
            children:[...],// 子集
            listeners:{...},// 事件集合
            directives:{...},// 指令
            scopedSlots:{},//插槽
            ...
        }
    ]

1、componentName组件名类型：string

标签名，必传, 1、html原生标签，例如：div、span、h1等 2、elementUI组件（可以简写），例如ElTable、Table、ElSelect、Select等 3、全局注册的组件，例如：BcTableList、BcDialog等 4、config配置的标签，例如ImportButton、DatePickerRange等， 详情请查看配置规则 WkConfig-componentNameReset 可以是elementUI组件，也可以是html原生标签，也可以是全局注册的组件等，elementUI表单组件可以省略El,其他组件必须全称

2、keyv-model的属性名（若有）类型：string

v-model的属性名， 例如v-model="form.remark"，key:'remark', source:()=>this.form 例如 v-model="form.data.remark,key:'data.remark'/'remark'" , source;()=>this.form/this.form.data

3、sourcev-model的对象（若有）类型：function/object

()=>{ // v-model的对象，例如v-model="form.remark" return this.form // v-model的对象，例如v-model="form.data.remark return this.form/this.form.data }

4、hide是否隐藏组件（v-if）类型：function/boolean

true/()=>{return true}全等,控制组件是否渲染，作用和v-if一样，若为true或函数的返回值为true时，隐藏组件

5、attrs属性对象集合类型：object

{ disabled:true, ...组件的属性对象集合 }

6、renderAttrs更新属性类型：object

{ // 每次渲染都更新的属性 disabled:xxx }

7、syncAttrs同步属性类型：object

{ label:'purOrgName',// 默认取source label.sync="form.purOrgName" label: { source: ()=>{ return this.form },//绑定的对象 key: 'purOrgName' // 对象的key } ...组件的sync属性 上等同于 :label.sync="form.purOrgName" }

8、linkageAttrs联动属性类型：object

{ disabled:()=>{ return this.form.isYes === 1 } ...组件需要动态联动的属性,值必须是函数 上等同于 :disabled="form.isYes === 1" }

9、nativeAttrs原生属性类型：object

{ class:'sss', ...原生的属性,一般是class或style,slot }

10、listeners事件类型：object

{ change: (e) => { ... }, ....组件的事件对象集合 }

11、directives指令类型：object

{ //应用于componentName组件上的指令 'v-show':true, 'v-show':()=>{ return true }

12、scopedSlots插槽,函数类型的为作用域插槽,非函数类型的为非作用域插槽类型：object

{ default:'默认插槽' // 具名插槽 test1:'test1', test2:{ componentName:'span', children:['test2'] }, test3:[ { componentName:'span', children:['test3-1'] }, { componentName:'span', children:['test3-2'] } ], // 作用域插槽(只能使用函数,不然取不到作用于的变量scope) test4:(scope)=>{ 1、return 'test1' 2、return { componentName:'span', children:['test2'] } 3、return [ { componentName:'span', children:['test3-1'] }, { componentName:'span', children:['test3-2'] } ] 4、return render函数/jsx } 插槽名：插槽内容（可以是字符串、组件json对象，可以是函数，如果是函数时，则视为作用于插槽，参数为作用域参数，取其返回值，返回值可以为组件json对象、组件json对象数组、render函数返回值） }

13、children子集类型：string/array/function

[ '文本内容', { componentName:'div', children:['div内容'] }, ()=>{ return render函数/jsx } ]//组件的子元素，可以为组件json对象，也可以是render函数，也可以为字符串

TeX代码实例\TeX代码实例TEX代码实例

template：
<bc-bridging-component class="el-margin-bottom" v-for="item in componentList" :render-object="item" :key="item.componentName" :source="form"/></div>
script：
export default {
    data(){
        return {
            // 绑定的对象
            form:{
              name:'',
              sex:''
            },
            // 绑定的元素对象集合
            componentList:[
              {
                componentName: 'Input',
                source:()=>{
                  return this.form
                },
                key: 'name',
                attrs: {
                  clearable: false
                },
                scopedSlots: {
                  suffix: {
                    componentName: 'i',
                    nativeAttrs: {
                      class: 'el-input__icon el-icon-user'
                    }
                  }
                }
              },
              {
                label: '性别',
                componentName: 'RadioGroup',
                key: 'sex',
                source:()=>{
                  return this.form
                },
                attrs: {
                  'text-color': 'red'
                },
                linkageAttrs:{
                  disabled:()=>{
                    return this.form.name===''
                  }
                },
                children: [
                  {
                    componentName: 'Radio',
                    attrs: {
                      label: '1'
                    },
                    children: '男'
                  },
                  {
                    componentName: 'Radio',
                    attrs: {
                      label: '2'
                    },
                    children: '女'
                  }
                ]
              }
            ]
        }
    }
  }

以上仅凭一个json数组的数据，就能把页面上的元素和事件通通包揽在内，此形式更方便存储于后端数据库内，作为动态页面（修改后无需打包发布即可改变页面元素）

原文链接：https://juejin.cn/post/7439752511295635510