Vue2升级Vue3时render函数迁移问题：setup无含data、children的上下文

迁移实现方案 #

Vue 3 的setup函数默认传入两个参数：props和上下文对象，你需要的对应参数可从这两个对象中直接获取：

• 原Vue2 render函数的data参数：对应上下文对象的attrs属性，包含了组件未声明为props的属性、class、style等透传属性
• 原children参数：对应上下文对象的slots.default()调用返回值，即组件默认插槽的内容

迁移后完整代码示例： #

// 原有工具函数保持不变
const filterFalsy = ([_, val]) => !!val

export default {
  // 先声明组件接收的props
  props: {
    item: Boolean,
    first: [String, Number],
    last: [String, Number],
    xs: [String, Number],
    sm: [String, Number],
    md: [String, Number],
    lg: [String, Number]
  },
  setup(props, { attrs, slots }) {
    // setup返回渲染函数即可
    return () => {
      if (props.item) {
        const { first, last } = props
        const reorderingClasses = Object.entries({ first, last })
          .filter(filterFalsy)
          .map(([key, value]) => `${key}-${value}`)
          .join(' ')

        const { xs, sm, md, lg } = props
        const sizeClasses = Object.entries({ xs, sm, md, lg })
          .filter(filterFalsy)
          .map(
            ([key, value]) => `col-${key}${value !== 'auto' ? `-${value}` : ''}`
          )
          .join(' ')

        // Vue3支持直接展开attrs合并属性，无需额外mergeData方法，如有特殊合并逻辑可保留原mergeData调用即可
        return (
          <div {...attrs} class={[reorderingClasses, sizeClasses]}>
            <div class="box">{slots.default?.()}</div>
          </div>
        )
      }
      return slots.default?.()
    }
  }
}

注意事项 #

• slots.default?.()的可选链操作符可避免插槽未传入时报错
• 若你使用的是<script setup>语法糖，可通过defineProps声明props，useAttrs和useSlots hooks获取对应属性和插槽内容
• 若你迁移的是函数式组件，Vue3函数式组件的入参为(props, { attrs, slots })，渲染逻辑和上述代码完全一致，直接将组件定义为函数即可

内容的提问来源于stack exchange，提问作者Jose Mac