数据结构设计

可以设计一个组件节点ComponentNode的数据结构,包含name、props、children字段,其中children再嵌套子组件节点。

class ComponentNode {
  constructor(name, props) {
    this.name = name
    this.props = props
    this.children = [] 
  }
}

递归算法设计

function generateCode(node) {

  // 拼接开始标签
  let code = `<${node.name}`
  
  // 拼接属性
Object.keys(node.props).forEach(key => {

  let value = node.props[key]

  if (key.startsWith('@')) {
    code += ` @${key.slice(1)}=${value}`
  } else if (key.startsWith(':')) {
    code += ` :${key.slice(1)}=${value}` 
  } else if (key.startsWith('v-')) {
    code += ` ${key}="${value}"`
  } else {
    code += ` ${key}="${value}"`
  }

})
  
  // 拼接子组件代码
  if (node.children.length) {
    code += '>'
    node.children.forEach(child => {
      code += generateCode(child) 
    })
    code += `</${node.name}>`
  } else {
    code += ' />'
  }

  return code
}

入参示例

// 组件节点
const node = new ComponentNode('el-table', {
  data: tableData, // 动态数据
  class: 'table-border', // 普通的 class 属性
  ':style': {color: 'red'}, // 动态样式
  '@click': onClick, // 点击事件
  'v-loading': loading, // v-指令
  'ref': 'tableRef', // ref 属性
  slot: 'slotContent', // 具名 slot
  is: 'component' // is 属性
})

node.children = [
  new ComponentNode('el-table-column', {
    prop: 'name',
    label: '姓名'
  }),
  new ComponentNode('el-table-column', { 
    prop: 'address',
    label: '地址' 
  }) 
]

生成结果

<el-table data=tableData class="table-border" :style={color: 'red'} @click=onClick v-loading=loading ref="tableRef" slot="slotContent" is="component">
  <el-table-column prop="name" label="姓名" />
  <el-table-column prop="address" label="地址" /> 
</el-table>