fix(vue): fix vue2 scopedSlot and slot pass problem (#2221)

alibaba · Sep 23, 2021 · 2489182 · 2489182
1 parent 4845ddf
commit 2489182
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/packages/vue/src/shared/fragment.ts b/packages/vue/src/shared/fragment.ts
@@ -22,8 +22,10 @@ if (isVue2) {
               name: 'frag',
             },
           ],
+          attrs: vm.$attrs,
+          scopedSlots: vm.$scopedSlots,
         },
-        vm?.$slots?.default
+        vm?.$scopedSlots?.default?.(vm.$attrs)
       )
     },
   }

diff --git a/packages/vue/src/shared/h.ts b/packages/vue/src/shared/h.ts
@@ -23,20 +23,30 @@ const compatibleCreateElement = (
       data?: VNodeData,
       components?: VNodeChildren
     ) => VNode
-    const scopedSlots = {}
+    const scopedSlots = components // 默认全部作为 scopedSlots 处理
     const children = []
+
+    /**
+     * scopedSlots 不会映射为slots，所以这里手动映射一遍
+     * 主要为了解决 slots.x 问题
+     */
     Object.keys(components).forEach((key) => {
       const func = components[key]
-      if (typeof func === 'function') {
-        if (func.length !== 0) {
-          scopedSlots[key] = func
-        } else if (key !== 'default') {
-          scopedSlots[key] = func
-          // compatible with slots usage
-          children.push(hInVue2(FragmentComponent, { slot: key }, func()))
-        } else {
-          children.push(func())
-        }
+
+      // 转换为 slots 传递
+      if (typeof func === 'function' && func.length === 0) {
+        /**
+         * func 参数为0的判断不准确，因为composition-api包了一层，导致全部为0
+         * try catch 解决scoped slots 转换参数异常问题
+         * */
+        try {
+          const child = func()
+          children.push(
+            key === 'default'
+              ? child
+              : hInVue2(FragmentComponent, { slot: key }, child)
+          )
+        } catch (error) {}
       }
     })
     const newData = Object.assign({}, data)