vue2.7 jsx 搬迁vue3.0 jsx项目的一些点

最近公司在做低代码开发，由于公司做saas开发，搬迁了一个vue3.0的项目，vue3.0基本是ts+tsx+native开发，这边用了js+vue2.7 componentsAPI +jsx+el，下面写一些遇到的jsx使用点

jsx el-form方面

---

//vue
<el-form model="this.form" ref="metaForm">
//jsx
<el-form props={{
          model: this.form
        }} ref="metaForm">

//获取ref方式
const metaForm = ref(null)

return { metaForm }

jsx el的.sync如何处理

//父组件
<CrontabDay :dayValue.sync="dayRef" :weekValue.sync="weekRef" />
//子组件
 props: { //props接收
    dayValue: { default: "*", type: String },
    weekValue: {
      type: String,
      default: "?",
    },
  },
//修改dayValue
const { proxy } = getCurrentInstance(); //获取this对象，没找到setup里更好获取this的方法
proxy.$emit('update:dayValue', dayRef.value.toString())

渲染函数 h() jsx vue3和vue2的使用区别

这篇文章有更具体的解释，我来用代码写一下记录点

//vue3 的三个参数 h（ ‘组件名字’ ,'组件属性/配置项'，‘插槽/函数返回/innerText’）
//vue2 的三个参数 h（ ‘组件名字’ ,'组件属性/配置项'，‘innerText’）
//vue2和3 jsx除了第三个参数都是一样的，自己使用过程大部分都是一样的，但是vue3有个 **renderSlot**  方法，自己卡在这里很久， 2个jsx父子组件的插槽方法是 写一下jsx 2.0 setup的写法

//先看vue3 子组件
return h(
    ‘父组件名称’,
    {
      onAdd: () => {
      }
    },
    {
      default: getChildren
    }
  )
//父组件 拿到 getChildren
const  ‘父组件名称’, = defineComponent({
  name: ‘父组件名称’,
  emits: ['add'],
  setup(props, ctx) {

    const onAdd = () => void ctx.emit('add')

    return { onAdd,}
  },
  render() {
    const {  $slots, onAdd } = this
    return h(
      NSpace,
      { vertical: true, style: { width: '100%' } },
      {
        default: () => {
          return [
            renderSlot($slots, 'default', { disabled }),
          ]
        }
      }
    )
  }
})
//在看vue2的写法
  return [
    h( ‘父组件名称’,, {
      on: {
        add: (val) => {
          fields[field].push({ ...defaultValue });
        },
      },
      scopedSlots: { //vue2 jsx的插槽传参方式
        default: (props) => {
          return [...getChildren()];
        },
      },
    }),
  ];   
//在父组件拿到  [...getChildren()];
const  ‘父组件名称’, = defineComponent({
  name: ‘父组件名称’,
  emits: ["add"],
  setup(props, ctx) {
  
    return {  disabled: false, ctx };
  },
  render() {
    const { disabled,  ctx } = this;
    return (
      <div>
        {ctx.slots.default?.()}
      </div>
    );
  },
});
//通过ctx 可以拿到emit 和 slot 通过slot拿到default 这里当时卡了很久

下面写一个简单的jsx封装el select的方式

import { h, unref } from "vue";
import { Select, Option } from "element-ui";
import { isFunction } from "lodash";

export function renderSelect(item, fields) {
  const {
    props,
    field,
    options = [],
    style,
  } = isFunction(item) ? item() : item;
  let hLabel = null;
  if (props?.topHolder) {
    hLabel = h("div", {}, props.topHolder);
  }
  return [
    h(Select, {
      props: {
        ...item,
        value: fields[field],
        placeholder: props?.placeholder || "请选择",
      },
      style: {
        ...style,
      },
      on: {
        input: (val) => {
          console.log(val);
          void (fields[field] = val);
          if (props?.onUpdateValue) props.onUpdateValue(val);
        },
      },
      scopedSlots: {
        default: (props) =>
          options.map((option) =>
            h(Option, {
              props: {
                label: option.label,
                value: option.value,
                disabled: option.disabled,
              },
            })
          ),
      },
    }),
  ];
}
//引用  JSON
{
      type: "select",
      field: field || "table",
      span: 12,
      name: t("project.node.datasource_table"),
      options: datasourceList,
      props: {
        onUpdateValue: onTableChange,
      },
      validate: {
        trigger: ["input", "blur"],
        required: true,
        validator(unuse, value, callback) {
          if (!value && value !== 0) {
            return callback(t("project.node.datasource_table"));
          }
          callback();
        },
      },
    },```