vue2jsx遇到的小坑

最近在公司的代码中遇到的一些坑,目前公司代码质量有点蛇皮..(组件套组件被套用的组件只是一个表单,翻来翻去就为了看个破表单...)虽然不是我写的,但是在维护上确实有点麻烦... 索性直接用jsx抽个表单.

依赖:

"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
"@vue/babel-preset-jsx": "^1.4.0",
"element-ui": "^2.15.13",
"vue": "^2.6.14"

练习项目图省事直接用的cli

废话不多说直接上代码:
传入对象: dataObj dataObj2 是一样的 我把这两个组件都引到了同一个页面去测试,省事

  dataObj2: {
    type: "add",// info
    list: [
      {
        label: "input框",
        prop: "name",
        type: "input",
        value: "123",
        disabled: false,
        attrs: {
          placeholder: "请输入name",
          onInput:(e)=>{
            console.log('%c [ arrts里面的input ]-', 'font-size:13px; background:pink; color:#bf2c9f;', e)
          }
        },
        event: {
          input: (e) => {
            console.log(
              "%c [ onInput input dataObj2]-",
              "font-size:13px; background:skyblue; color:#bf2c9f;",
              e
            );
          },
          onInput: (e) => {
            console.log(
              "%c [ onInput input dataObj222]-",
              "font-size:13px; background:skyblue; color:#bf2c9f;",
              e
            );
          },
          onChange: (e) => {
            console.log(
              "%c [ onChange change dataObj2]-",
              "font-size:13px; background:skyblue; color:#bf2c9f;",
              e
            );
          },
        },
      },
      {
        label: "select框",
        prop: "desc",
        type: "select",
        value: "",
        option: [
          { label: "活动一", value: "huodong1" },
          { label: "活动二", value: "huodong2" },
        ],
      },
      {
        label: "radio单选框",
        prop: "radio",
        type: "radio",
        value: "",
        option: [
          { label: "单选框一", value: "radio1" },
          { label: "单选框二", value: "radio2" },
        ],
      },
      {
        label: "input框2",
        prop: "name2",
        type: "input",
        value: "",
        disabled: false,
        attrs: {
          placeholder: "请输入name2",
        },
        event: {
          input: (e) => {
            console.log(
              "%c [ e input ]-",
              "font-size:13px; background:skyblue; color:#bf2c9f;",
              e
            );
          },
          change: (e) => {
            console.log(
              "%c [ e change ]-",
              "font-size:13px; background:skyblue; color:#bf2c9f;",
              e
            );
          },
        },
      },
    ],
    rules: {
      name: [
        { required: true, message: "请输入活动名称", trigger: "blur" },
      ],
      desc: [
        { required: true, message: "请输入活动形式", trigger: "blur" },
      ],
      name2: [
        { required: true, message: "请输入活动名称2", trigger: "blur" },
      ],
    },
    labelWidth: "100px",
  }

jsx版:

结构

  

组件代码:

组件复用版:
结构

循环配置项

  

组件代码: