[bugfix] functional component should not inherit scropedSlots (#2752)

packages/card/index.js

@@ -1,4 +1,5 @@
 import { use, isDef } from '../utils';
+import { inherit } from '../utils/functional';
 import Tag from '../tag';
 
 const [sfc, bem] = use('card');
@@ -68,7 +69,7 @@ function Card(h, props, slots, ctx) {
   );
 
   return (
-    <div class={bem()} {...ctx.data}>
+    <div class={bem()} {...inherit(ctx, true)}>
       <div class={bem('header')}>
         {Thumb}
         <div class={bem('content', { centered: props.centered })}>

packages/cell-group/index.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { inherit } from '../utils/functional';
 
 const [sfc, bem] = use('cell-group');
 
@@ -6,7 +7,7 @@ function CellGroup(h, props, slots, ctx) {
   return (
     <div
       class={[bem(), { 'van-hairline--top-bottom': props.border }]}
-      {...ctx.data}
+      {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
     </div>

packages/goods-action/index.js

@@ -1,10 +1,11 @@
 import { use } from '../utils';
+import { inherit } from '../utils/functional';
 
 const [sfc, bem] = use('goods-action');
 
 function GoodsAction(h, props, slots, ctx) {
   return (
-    <div class={bem()} {...ctx.data}>
+    <div class={bem()} {...inherit(ctx, true)}>
       {slots.default && slots.default()}
     </div>
   );

packages/icon/index.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { inherit } from '../utils/functional';
 import Info from '../info';
 import isSrc from '../utils/validate/src';
 
@@ -17,7 +18,7 @@ function Icon(h, props, slots, ctx) {
         color: props.color,
         fontSize: props.size
       }}
-      {...ctx.data}
+      {...inherit(ctx, true)}
     >
       {ctx.default && ctx.default()}
       {urlIcon && <img src={props.name} />}

packages/info/index.js

@@ -1,11 +1,12 @@
 import { use, isDef } from '../utils';
+import { inherit } from '../utils/functional';
 
 const [sfc, bem] = use('info');
 
 function Info(h, props, slots, ctx) {
   return (
     isDef(props.info) && (
-      <div class={bem()} {...ctx.data}>
+      <div class={bem()} {...inherit(ctx, true)}>
         {props.info}
       </div>
     )

packages/loading/index.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { inherit } from '../utils/functional';
 
 const [sfc, bem] = use('loading');
 const DEFAULT_COLOR = '#c9c9c9';
@@ -28,7 +29,7 @@ function Loading(h, props, slots, ctx) {
   );
 
   return (
-    <div class={bem([type, colorType])} style={style} {...ctx.data}>
+    <div class={bem([type, colorType])} style={style} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)}>
         {Spin}
         {Circular}

packages/panel/index.js

@@ -1,29 +1,36 @@
 import { use } from '../utils';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
+import { inherit } from '../utils/functional';
 
 const [sfc, bem] = use('panel');
 
 function Panel(h, props, slots, ctx) {
+  const Content = () => [
+    slots.header ? (
+      slots.header()
+    ) : (
+      <Cell
+        icon={props.icon}
+        label={props.desc}
+        title={props.title}
+        value={props.status}
+        class={bem('header')}
+        valueClass={bem('header-value')}
+      />
+    ),
+    <div class={bem('content')}>{slots.default && slots.default()}</div>,
+    slots.footer && (
+      <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer()}</div>
+    )
+  ];
+
   return (
-    <CellGroup class={bem()} {...ctx.data}>
-      {slots.header ? (
-        slots.header()
-      ) : (
-        <Cell
-          icon={props.icon}
-          label={props.desc}
-          title={props.title}
-          value={props.status}
-          class={bem('header')}
-          valueClass={bem('header-value')}
-        />
-      )}
-      <div class={bem('content')}>{slots.default && slots.default()}</div>
-      {slots.footer && (
-        <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer()}</div>
-      )}
-    </CellGroup>
+    <CellGroup
+      class={bem()}
+      scopedSlots={{ default: Content }}
+      {...inherit(ctx, true)}
+    />
   );
 }
 

packages/password-input/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { emit } from '../utils/functional';
+import { emit, inherit } from '../utils/functional';
 
 const [sfc, bem] = use('password-input');
 
@@ -23,7 +23,7 @@ function PasswordInput(h, props, slots, ctx) {
           event.stopPropagation();
           emit(ctx, 'focus', event);
         }}
-        {...ctx.data}
+        {...inherit(ctx, true)}
       >
         {Points}
       </ul>

packages/tag/index.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { inherit } from '../utils/functional';
 import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
 const [sfc, bem] = use('tag');
@@ -29,7 +30,7 @@ function Tag(h, props, slots, ctx) {
           'van-hairline--surround': plain
         }
       ]}
-      {...ctx.data}
+      {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
     </span>

packages/utils/functional.ts

@@ -21,8 +21,8 @@ const inheritKey = [
 const mapInheritKey: ObjectIndex = { nativeOn: 'on' };
 
 // inherit partial context, map nativeOn to on
-export function inherit(context: Context): InheritContext {
-  return inheritKey.reduce(
+export function inherit(context: Context, inheritListeners: boolean): InheritContext {
+  const result = inheritKey.reduce(
     (obj, key) => {
       if (context.data[key]) {
         obj[mapInheritKey[key] || key] = context.data[key];
@@ -31,6 +31,13 @@ export function inherit(context: Context): InheritContext {
     },
     {} as InheritContext
   );
+
+  if (inheritListeners) {
+    result.on = result.on || {};
+    Object.assign(result.on, context.data.on);
+  }
+
+  return result;
 }
 
 // emit event