需求： 以往的写前端页面都是标签的形式，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数组的数据，就能把页面上的元素和事件通通包揽在内，此形式更方便存储于后端数据库内，作为动态页面（修改后无需打包发布即可改变页面元素）
友情链接： 黑马模板网