diff --git a/package.json b/package.json
index a330a6efe..6aa4cd977 100644
--- a/package.json
+++ b/package.json
@@ -113,12 +113,12 @@
     "stylelint-config-standard": "^18.2.0",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.1.2",
-    "vue": "2.6.1",
+    "vue": "2.6.2",
     "vue-jest": "4.0.0-beta.1",
     "vue-loader": "^15.6.2",
     "vue-router": "^3.0.2",
-    "vue-server-renderer": "^2.6.1",
-    "vue-template-compiler": "2.6.1",
+    "vue-server-renderer": "^2.6.2",
+    "vue-template-compiler": "2.6.2",
     "vue-template-es2015-compiler": "^1.8.2",
     "webpack": "^4.29.1",
     "webpack-cli": "^3.1.2",
diff --git a/packages/actionsheet/index.js b/packages/actionsheet/index.js
index af9d63452..0207845e1 100644
--- a/packages/actionsheet/index.js
+++ b/packages/actionsheet/index.js
@@ -83,7 +83,7 @@ export default sfc({
         {cancelText}
       </div>
     ) : (
-      <div class={bem('content')}>{this.$slots.default}</div>
+      <div class={bem('content')}>{this.slots()}</div>
     );
 
     return (
diff --git a/packages/address-edit/index.js b/packages/address-edit/index.js
index f30f667e2..792d87c0c 100644
--- a/packages/address-edit/index.js
+++ b/packages/address-edit/index.js
@@ -279,7 +279,7 @@ export default sfc({
             onFocus={onFocus('postalCode')}
           />
         )}
-        {this.$slots.default}
+        {this.slots()}
         {this.showSetDefault && (
           <SwitchCell
             vModel={data.isDefault}
diff --git a/packages/address-list/index.js b/packages/address-list/index.js
index d4135ab0f..fc2366ec4 100644
--- a/packages/address-list/index.js
+++ b/packages/address-list/index.js
@@ -40,13 +40,13 @@ export default sfc({
 
     return (
       <div class={bem()}>
-        {this.$slots.top}
+        {this.slots('top')}
         <RadioGroup value={this.value} onInput={event => this.$emit('input', event)}>
           {List}
         </RadioGroup>
         {this.disabledText && <div class={bem('disabled-text')}>{this.disabledText}</div>}
         {DisabledList}
-        {this.$slots.default}
+        {this.slots()}
         <Button
           square
           size="large"
diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js
index 202463696..e21880d07 100644
--- a/packages/badge-group/index.js
+++ b/packages/badge-group/index.js
@@ -23,6 +23,6 @@ export default sfc({
   },
 
   render(h) {
-    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.$slots.default}</div>;
+    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
   }
 });
diff --git a/packages/card/index.js b/packages/card/index.js
index c8851e5ad..05d16705e 100644
--- a/packages/card/index.js
+++ b/packages/card/index.js
@@ -22,17 +22,17 @@ export default sfc({
   },
 
   render(h) {
-    const { thumb, $slots: slots } = this;
+    const { thumb, slots } = this;
 
-    const showThumb = slots.thumb || thumb;
-    const showTag = slots.tag || this.tag;
-    const showNum = slots.num || isDef(this.num);
-    const showPrice = slots.price || isDef(this.price);
-    const showOriginPrice = slots['origin-price'] || isDef(this.originPrice);
+    const showThumb = slots('thumb') || thumb;
+    const showTag = slots('tag') || this.tag;
+    const showNum = slots('num') || isDef(this.num);
+    const showPrice = slots('price') || isDef(this.price);
+    const showOriginPrice = slots('origin-price') || isDef(this.originPrice);
 
     const Thumb = showThumb && (
       <a href={this.thumbLink} class={bem('thumb')}>
-        {slots.thumb ||
+        {slots('thumb') ||
           (this.lazyLoad ? (
             <img class={bem('img')} vLazy={thumb} />
           ) : (
@@ -40,7 +40,7 @@ export default sfc({
           ))}
         {showTag && (
           <div class={bem('tag')}>
-            {slots.tag || (
+            {slots('tag') || (
               <Tag mark type="danger">
                 {this.tag}
               </Tag>
@@ -50,24 +50,24 @@ export default sfc({
       </a>
     );
 
-    const Title = slots.title || (this.title && <div class={bem('title')}>{this.title}</div>);
+    const Title = slots('title') || (this.title && <div class={bem('title')}>{this.title}</div>);
 
     const Desc =
-      slots.desc || (this.desc && <div class={[bem('desc'), 'van-ellipsis']}>{this.desc}</div>);
+      slots('desc') || (this.desc && <div class={[bem('desc'), 'van-ellipsis']}>{this.desc}</div>);
 
     const Price = showPrice && (
-      <div class={bem('price')}>{slots.price || `${this.currency} ${this.price}`}</div>
+      <div class={bem('price')}>{slots('price') || `${this.currency} ${this.price}`}</div>
     );
 
     const OriginPrice = showOriginPrice && (
       <div class={bem('origin-price')}>
-        {slots['origin-price'] || `${this.currency} ${this.originPrice}`}
+        {slots('origin-price') || `${this.currency} ${this.originPrice}`}
       </div>
     );
 
-    const Num = showNum && <div class={bem('num')}>{slots.num || `x ${this.num}`}</div>;
+    const Num = showNum && <div class={bem('num')}>{slots('num') || `x ${this.num}`}</div>;
 
-    const Footer = slots.footer && <div class={bem('footer')}>{slots.footer}</div>;
+    const Footer = slots('footer') && <div class={bem('footer')}>{slots('footer')}</div>;
 
     return (
       <div class={bem()}>
@@ -76,7 +76,7 @@ export default sfc({
           <div class={bem('content', { centered: this.centered })}>
             {Title}
             {Desc}
-            {slots.tags}
+            {slots('tags')}
             <div class="van-card__bottom">
               {Price}
               {OriginPrice}
diff --git a/packages/cell/index.js b/packages/cell/index.js
index 30d5828be..84a1fba5f 100644
--- a/packages/cell/index.js
+++ b/packages/cell/index.js
@@ -22,29 +22,29 @@ export default sfc({
   },
 
   render(h) {
-    const slots = this.$slots;
-    const showTitle = slots.title || isDef(this.title);
-    const showValue = slots.default || isDef(this.value);
+    const { slots } = this;
+    const showTitle = slots('title') || isDef(this.title);
+    const showValue = slots() || isDef(this.value);
 
     const Title = showTitle && (
       <div class={[bem('title'), this.titleClass]}>
-        {slots.title || <span>{this.title}</span>}
+        {slots('title') || <span>{this.title}</span>}
         {this.label && <div class={[bem('label'), this.labelClass]}>{this.label}</div>}
       </div>
     );
 
     const Value = showValue && (
-      <div class={[bem('value', { alone: !slots.title && !this.title }), this.valueClass]}>
-        {slots.default || <span>{this.value}</span>}
+      <div class={[bem('value', { alone: !slots('title') && !this.title }), this.valueClass]}>
+        {slots() || <span>{this.value}</span>}
       </div>
     );
 
-    const LeftIcon = slots.icon || (
+    const LeftIcon = slots('icon') || (
       this.icon && <Icon class={bem('left-icon')} name={this.icon} />
     );
 
     const arrowIcon = this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
-    const RightIcon = slots['right-icon'] || (
+    const RightIcon = slots('right-icon') || (
       this.isLink && <Icon class={bem('right-icon')} name={arrowIcon} />
     );
 
@@ -63,7 +63,7 @@ export default sfc({
         {Title}
         {Value}
         {RightIcon}
-        {slots.extra}
+        {slots('extra')}
       </div>
     );
   }
diff --git a/packages/checkbox-group/index.js b/packages/checkbox-group/index.js
index 2d50b8631..87254796c 100644
--- a/packages/checkbox-group/index.js
+++ b/packages/checkbox-group/index.js
@@ -16,6 +16,6 @@ export default sfc({
   },
 
   render(h) {
-    return <div class={bem()}>{this.$slots.default}</div>;
+    return <div class={bem()}>{this.slots()}</div>;
   }
 });
diff --git a/packages/circle/index.js b/packages/circle/index.js
index f84efe7f9..3e33e1448 100644
--- a/packages/circle/index.js
+++ b/packages/circle/index.js
@@ -110,7 +110,7 @@ export default sfc({
           <path class={bem('hover')} style={this.hoverStyle} d={PATH} />
           <path class={bem('layer')} style={this.layerStyle} d={PATH} />
         </svg>
-        {this.$slots.default || (this.text && <div class={bem('text')}>{this.text}</div>)}
+        {this.slots() || (this.text && <div class={bem('text')}>{this.text}</div>)}
       </div>
     );
   }
diff --git a/packages/col/index.js b/packages/col/index.js
index 616b1fffe..e372b7156 100644
--- a/packages/col/index.js
+++ b/packages/col/index.js
@@ -27,7 +27,7 @@ export default sfc({
     const { span, offset } = this;
     return (
       <this.tag class={bem({ [span]: span, [`offset-${offset}`]: offset })} style={this.style}>
-        {this.$slots.default}
+        {this.slots()}
       </this.tag>
     );
   }
diff --git a/packages/collapse-item/index.js b/packages/collapse-item/index.js
index 24fcbd56b..98d0a04c0 100644
--- a/packages/collapse-item/index.js
+++ b/packages/collapse-item/index.js
@@ -116,8 +116,8 @@ export default sfc({
         onClick={this.onClick}
         {...{ props: this.$props }}
       >
-        {this.$slots.value}
-        {CELL_SLOTS.map(slot => h('template', { slot }, this.$slots[slot]))}
+        {this.slots('value')}
+        {CELL_SLOTS.map(slot => h('template', { slot }, this.slots(slot)))}
       </Cell>
     );
 
@@ -129,7 +129,7 @@ export default sfc({
         onTransitionend={this.onTransitionEnd}
       >
         <div ref="content" class={bem('content')}>
-          {this.$slots.default}
+          {this.slots()}
         </div>
       </div>
     );
diff --git a/packages/collapse/index.js b/packages/collapse/index.js
index b209f5312..518312f36 100644
--- a/packages/collapse/index.js
+++ b/packages/collapse/index.js
@@ -27,6 +27,6 @@ export default sfc({
   },
 
   render(h) {
-    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.$slots.default}</div>;
+    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
   }
 });
diff --git a/packages/dialog/Dialog.js b/packages/dialog/Dialog.js
index 2d2163ba9..d9b046117 100644
--- a/packages/dialog/Dialog.js
+++ b/packages/dialog/Dialog.js
@@ -68,7 +68,7 @@ export default sfc({
     }
 
     const { title, message, messageAlign } = this;
-    const children = this.$slots.default;
+    const children = this.slots();
 
     const Title = title && (
       <div class={bem('header', { isolated: !message && !children })}>{title}</div>
diff --git a/packages/field/index.js b/packages/field/index.js
index 2d6b0ab17..49953715a 100644
--- a/packages/field/index.js
+++ b/packages/field/index.js
@@ -167,19 +167,19 @@ export default sfc({
   },
 
   render(h) {
-    const { type, labelAlign, $slots: slots } = this;
+    const { type, labelAlign, slots } = this;
 
-    const showLeftIcon = slots['left-icon'] || this.leftIcon;
-    const showRightIcon = slots['right-icon'] || slots.icon || this.rightIcon || this.icon;
+    const showLeftIcon = slots('left-icon') || this.leftIcon;
+    const showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon;
 
     const LeftIcon = showLeftIcon && (
       <div slot="icon" class={bem('left-icon')} onClick={this.onClickLeftIcon}>
-        {slots['left-icon'] || <Icon name={this.leftIcon} />}
+        {slots('left-icon') || <Icon name={this.leftIcon} />}
       </div>
     );
     const RightIcon = showRightIcon && (
       <div class={bem('right-icon')} onClick={this.onClickRightIcon}>
-        {slots['right-icon'] || slots.icon || <Icon name={this.rightIcon || this.icon} />}
+        {slots('right-icon') || slots('icon') || <Icon name={this.rightIcon || this.icon} />}
       </div>
     );
 
@@ -214,12 +214,12 @@ export default sfc({
         })}
       >
         {LeftIcon}
-        {h('template', { slot: 'title' }, slots.label)}
+        {h('template', { slot: 'title' }, slots('label'))}
         <div class={bem('body')}>
           {Input}
           {this.showClear && <Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} />}
           {RightIcon}
-          {slots.button && <div class={bem('button')}>{slots.button}</div>}
+          {slots('button') && <div class={bem('button')}>{slots('button')}</div>}
         </div>
         {this.errorMessage && <div class={bem('error-message')}>{this.errorMessage}</div>}
       </Cell>
diff --git a/packages/goods-action-big-btn/index.js b/packages/goods-action-big-btn/index.js
index 8440d9055..f4aa4541a 100644
--- a/packages/goods-action-big-btn/index.js
+++ b/packages/goods-action-big-btn/index.js
@@ -32,7 +32,7 @@ export default sfc({
         type={this.primary ? 'danger' : 'warning'}
         onClick={this.onClick}
       >
-        {this.$slots.default || this.text}
+        {this.slots() || this.text}
       </Button>
     );
   }
diff --git a/packages/goods-action-mini-btn/index.js b/packages/goods-action-mini-btn/index.js
index 19eecb3d0..18658ec5f 100644
--- a/packages/goods-action-mini-btn/index.js
+++ b/packages/goods-action-mini-btn/index.js
@@ -25,7 +25,7 @@ export default sfc({
     return (
       <div class={[bem(), 'van-hairline']} onClick={this.onClick}>
         <Icon class={[bem('icon'), this.iconClass]} info={this.info} name={this.icon} />
-        {this.$slots.default || this.text}
+        {this.slots() || this.text}
       </div>
     );
   }
diff --git a/packages/list/index.js b/packages/list/index.js
index cac5cfe82..b4a06d13d 100644
--- a/packages/list/index.js
+++ b/packages/list/index.js
@@ -116,10 +116,10 @@ export default sfc({
   render(h) {
     return (
       <div class={bem()}>
-        {this.$slots.default}
+        {this.slots()}
         {this.loading && (
           <div class={bem('loading')}>
-            {this.$slots.loading || [
+            {this.slots('loading') || [
               <Loading class={bem('loading-icon')} />,
               <span class={bem('loading-text')}>{this.loadingText || t('loading')}</span>
             ]}
diff --git a/packages/mixins/checkbox.js b/packages/mixins/checkbox.js
index f95e3d46f..19f54f004 100644
--- a/packages/mixins/checkbox.js
+++ b/packages/mixins/checkbox.js
@@ -1,7 +1,6 @@
 /**
  * Common part of Checkbox & Radio
  */
-import { useSlots } from '../utils';
 import Icon from '../icon';
 import findParent from './find-parent';
 
@@ -42,18 +41,18 @@ export default (parent, bem) => ({
   },
 
   render(h) {
-    const { checked } = this;
-    const slots = useSlots(this);
+    const { slots, checked } = this;
+
     const CheckIcon = slots('icon', { checked }) || (
       <Icon name="success" style={this.iconStyle} />
     );
 
-    const Label = slots('default') && (
+    const Label = slots() && (
       <span
         class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
         onClick={this.onClickLabel}
       >
-        {slots('default')}
+        {slots()}
       </span>
     );
 
diff --git a/packages/mixins/slots.js b/packages/mixins/slots.js
new file mode 100644
index 000000000..a2e08ff93
--- /dev/null
+++ b/packages/mixins/slots.js
@@ -0,0 +1,16 @@
+/**
+ * Use scopedSlots in Vue 2.6+
+ * downgrade to slots in lower version
+ */
+
+export default {
+  methods: {
+    slots(name = 'default', props) {
+      const { $slots, $scopedSlots } = this;
+      if ($scopedSlots[name]) {
+        return $scopedSlots[name](props);
+      }
+      return $slots[name];
+    }
+  }
+};
diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.js
index 39e4386af..988fb78ba 100644
--- a/packages/notice-bar/index.js
+++ b/packages/notice-bar/index.js
@@ -106,7 +106,7 @@ export default sfc({
             onAnimationend={this.onAnimationEnd}
             onWebkitAnimationEnd={this.onAnimationEnd}
           >
-            {this.$slots.default || this.text}
+            {this.slots() || this.text}
           </div>
         </div>
         {iconName && <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />}
diff --git a/packages/pagination/index.js b/packages/pagination/index.js
index 2a76a6cc7..95aead243 100644
--- a/packages/pagination/index.js
+++ b/packages/pagination/index.js
@@ -127,7 +127,7 @@ export default sfc({
           </li>
         ))}
         {simple && (
-          <li class={bem('page-desc')}>{this.$slots.pageDesc || `${value}/${this.count}`}</li>
+          <li class={bem('page-desc')}>{this.slots('pageDesc') || `${value}/${this.count}`}</li>
         )}
         <li
           class={[bem('item', { disabled: value === this.count }), bem('next'), 'van-hairline']}
diff --git a/packages/picker/index.js b/packages/picker/index.js
index a17f8b0df..7fc0e5c75 100644
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@@ -149,7 +149,7 @@ export default sfc({
 
     const Toolbar = this.showToolbar && (
       <div class={['van-hairline--top-bottom', bem('toolbar')]}>
-        {this.$slots.default || [
+        {this.slots() || [
           <div class={bem('cancel')} onClick={this.onCancel}>
             {this.cancelButtonText || t('cancel')}
           </div>,
diff --git a/packages/popup/index.js b/packages/popup/index.js
index a09d0c048..c8d64ec2a 100644
--- a/packages/popup/index.js
+++ b/packages/popup/index.js
@@ -35,7 +35,7 @@ export default sfc({
         onAfterLeave={emit('closed')}
       >
         <div vShow={this.value} class={bem({ [position]: position })}>
-          {this.$slots.default}
+          {this.slots()}
         </div>
       </transition>
     );
diff --git a/packages/pull-refresh/index.js b/packages/pull-refresh/index.js
index ce1c38be0..e7c145330 100644
--- a/packages/pull-refresh/index.js
+++ b/packages/pull-refresh/index.js
@@ -133,7 +133,7 @@ export default sfc({
       transform: `translate3d(0,${this.height}px, 0)`
     };
 
-    const Status = this.$slots[status] || [
+    const Status = this.slots(status) || [
       (status === 'pulling' || status === 'loosing') && <div class={bem('text')}>{text}</div>,
       status === 'loading' && (
         <div class={bem('loading')}>
@@ -154,7 +154,7 @@ export default sfc({
           onTouchcancel={this.onTouchEnd}
         >
           <div class={bem('head')}>{Status}</div>
-          {this.$slots.default}
+          {this.slots()}
         </div>
       </div>
     );
diff --git a/packages/radio-group/index.js b/packages/radio-group/index.js
index 0c855f523..c0d5fbee9 100644
--- a/packages/radio-group/index.js
+++ b/packages/radio-group/index.js
@@ -15,6 +15,6 @@ export default sfc({
   },
 
   render(h) {
-    return <div class={bem()}>{this.$slots.default}</div>;
+    return <div class={bem()}>{this.slots()}</div>;
   }
 });
diff --git a/packages/row/index.js b/packages/row/index.js
index 679bee39b..0d2f01256 100644
--- a/packages/row/index.js
+++ b/packages/row/index.js
@@ -32,7 +32,7 @@ export default sfc({
           [`justify-${justify}`]: flex && justify
         })}
       >
-        {this.$slots.default}
+        {this.slots()}
       </this.tag>
     );
   }
diff --git a/packages/search/index.js b/packages/search/index.js
index e7356b0d0..c190aeefe 100644
--- a/packages/search/index.js
+++ b/packages/search/index.js
@@ -63,11 +63,11 @@ export default sfc({
           leftIcon="search"
           {...props}
         >
-          {h('template', { slot: 'left-icon' }, this.$slots['left-icon'])}
+          {h('template', { slot: 'left-icon' }, this.slots('left-icon'))}
         </Field>
         {showAction && (
           <div class={bem('action')}>
-            {this.$slots.action || <div onClick={this.onBack}>{t('cancel')}</div>}
+            {this.slots('action') || <div onClick={this.onBack}>{t('cancel')}</div>}
           </div>
         )}
       </div>
diff --git a/packages/sku/Sku.js b/packages/sku/Sku.js
index aefceefb4..21e05006b 100644
--- a/packages/sku/Sku.js
+++ b/packages/sku/Sku.js
@@ -9,9 +9,9 @@ import SkuRowItem from './components/SkuRowItem';
 import SkuStepper from './components/SkuStepper';
 import SkuMessages from './components/SkuMessages';
 import SkuActions from './components/SkuActions';
+import { use } from '../utils';
 import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues } from './utils/skuHelper';
 import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
-import { use, useSlots } from '../utils';
 
 const [sfc] = use('sku');
 const { QUOTA_LIMIT } = LIMIT_TYPE;
@@ -367,7 +367,7 @@ export default sfc({
       selectedSku,
       selectedSkuComb
     };
-    const slots = name => useSlots(this)(name, slotsProps);
+    const slots = name => this.slots(name, slotsProps);
 
     const Header = slots('sku-header') || (
       <SkuHeader sku={sku} goods={goods} skuEventBus={skuEventBus} selectedSku={selectedSku}>
diff --git a/packages/sku/components/SkuHeader.js b/packages/sku/components/SkuHeader.js
index e58647f28..76566f75e 100644
--- a/packages/sku/components/SkuHeader.js
+++ b/packages/sku/components/SkuHeader.js
@@ -46,7 +46,7 @@ export default sfc({
         </div>
         <div class={bem('goods-info')}>
           <div class="van-sku__goods-name van-ellipsis">{this.goods.title}</div>
-          {this.$slots.default}
+          {this.slots()}
           <Icon
             name="close"
             class="van-sku__close-icon"
diff --git a/packages/sku/components/SkuRow.js b/packages/sku/components/SkuRow.js
index 76abaa881..ec38fc7fa 100644
--- a/packages/sku/components/SkuRow.js
+++ b/packages/sku/components/SkuRow.js
@@ -11,7 +11,7 @@ export default sfc({
     return (
       <div class={bem()}>
         <div class={bem('title')}>{this.skuRow.k}：</div>
-        {this.$slots.default}
+        {this.slots()}
       </div>
     );
   }
diff --git a/packages/slider/index.js b/packages/slider/index.js
index 6974bfe61..9e506e00d 100644
--- a/packages/slider/index.js
+++ b/packages/slider/index.js
@@ -96,7 +96,7 @@ export default sfc({
             onTouchend={this.onTouchEnd}
             onTouchcancel={this.onTouchEnd}
           >
-            {this.$slots.button || <div class={bem('button')} />}
+            {this.slots('button') || <div class={bem('button')} />}
           </div>
         </div>
       </div>
diff --git a/packages/step/index.js b/packages/step/index.js
index b883ace67..f53a14eab 100644
--- a/packages/step/index.js
+++ b/packages/step/index.js
@@ -30,7 +30,7 @@ export default sfc({
     return (
       <div class={['van-hairline', bem([direction, { [status]: status }])]}>
         <div class={bem('title')} style={titleStyle}>
-          {this.$slots.default}
+          {this.slots()}
         </div>
         <div class={bem('circle-container')}>
           {status !== 'process' ? (
diff --git a/packages/steps/index.js b/packages/steps/index.js
index 944bb0cb1..48c4dfc0a 100644
--- a/packages/steps/index.js
+++ b/packages/steps/index.js
@@ -28,10 +28,10 @@ export default sfc({
   },
 
   render(h) {
-    const { icon, title, description, $slots } = this;
+    const { icon, title, description, slots } = this;
 
-    const StatusIcon = ($slots.icon || icon) && (
-      <div class={bem('icon')}>{$slots.icon || <Icon name={icon} class={this.iconClass} />}</div>
+    const StatusIcon = (slots('icon') || icon) && (
+      <div class={bem('icon')}>{slots('icon') || <Icon name={icon} class={this.iconClass} />}</div>
     );
 
     const StatusMessage = (
@@ -47,10 +47,10 @@ export default sfc({
           <div class={bem('status')}>
             {StatusIcon}
             {StatusMessage}
-            {$slots['message-extra']}
+            {slots('message-extra')}
           </div>
         )}
-        <div class={bem('items', { alone: !title && !description })}>{$slots.default}</div>
+        <div class={bem('items', { alone: !title && !description })}>{slots()}</div>
       </div>
     );
   }
diff --git a/packages/swipe-cell/index.js b/packages/swipe-cell/index.js
index 96f278e2b..72f56bbe8 100644
--- a/packages/swipe-cell/index.js
+++ b/packages/swipe-cell/index.js
@@ -148,13 +148,13 @@ export default sfc({
         >
           {this.leftWidth && (
             <div class={bem('left')} onClick={onClick('left', true)}>
-              {this.$slots.left}
+              {this.slots('left')}
             </div>
           )}
-          {this.$slots.default}
+          {this.slots()}
           {this.rightWidth && (
             <div class={bem('right')} onClick={onClick('right', true)}>
-              {this.$slots.right}
+              {this.slots('right')}
             </div>
           )}
         </div>
diff --git a/packages/swipe-item/index.js b/packages/swipe-item/index.js
index 849d9dc71..be2f913be 100644
--- a/packages/swipe-item/index.js
+++ b/packages/swipe-item/index.js
@@ -28,7 +28,7 @@ export default sfc({
 
     return (
       <div class={bem()} style={style}>
-        {this.$slots.default}
+        {this.slots()}
       </div>
     );
   }
diff --git a/packages/swipe/index.js b/packages/swipe/index.js
index deaf0cfcc..e4f3d47e8 100644
--- a/packages/swipe/index.js
+++ b/packages/swipe/index.js
@@ -265,7 +265,7 @@ export default sfc({
     const { count, activeIndicator } = this;
 
     const Indicator =
-      this.$slots.indicator ||
+      this.slots('indicator') ||
       (this.showIndicators && count > 1 && (
         <div class={bem('indicators', { vertical: this.vertical })} onTransitionend={stop}>
           {Array(...Array(count)).map((empty, index) => (
@@ -288,7 +288,7 @@ export default sfc({
           onTouchcancel={this.onTouchEnd}
           onTransitionend={this.onTransitionend}
         >
-          {this.$slots.default}
+          {this.slots()}
         </div>
         {Indicator}
       </div>
diff --git a/packages/tab/index.js b/packages/tab/index.js
index 7a0ab81ac..5af0aa92a 100644
--- a/packages/tab/index.js
+++ b/packages/tab/index.js
@@ -44,10 +44,10 @@ export default sfc({
 
   mounted() {
     const { tabs } = this.parent;
-    const index = this.parent.$slots.default.indexOf(this.$vnode);
+    const index = this.parent.slots().indexOf(this.$vnode);
     tabs.splice(index === -1 ? tabs.length : index, 0, this);
 
-    if (this.$slots.title) {
+    if (this.slots('title')) {
       this.parent.renderTitle(this.$refs.title, this.index);
     }
   },
@@ -57,11 +57,11 @@ export default sfc({
   },
 
   render(h) {
-    const slots = this.$slots;
+    const { slots } = this;
     return (
       <div vShow={this.selected || this.parent.animated} class={bem('pane')}>
-        {this.inited ? slots.default : h()}
-        {slots.title && <div ref="title">{slots.title}</div>}
+        {this.inited ? slots() : h()}
+        {slots('title') && <div ref="title">{slots('title')}</div>}
       </div>
     );
   }
diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js
index 0e898695e..605e32c09 100644
--- a/packages/tabbar-item/index.js
+++ b/packages/tabbar-item/index.js
@@ -1,4 +1,4 @@
-import { use, useSlots } from '../utils';
+import { use } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
 import RouterLink from '../mixins/router-link';
@@ -37,8 +37,7 @@ export default sfc({
   },
 
   render(h) {
-    const { icon, active } = this;
-    const slots = useSlots(this);
+    const { icon, slots, active } = this;
     const style = active ? { color: this.$parent.activeColor } : null;
 
     return (
diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js
index 77a7a9719..5b414ccb2 100644
--- a/packages/tabbar/index.js
+++ b/packages/tabbar/index.js
@@ -53,7 +53,7 @@ export default sfc({
         style={{ zIndex: this.zIndex }}
         class={['van-hairline--top-bottom', bem({ fixed: this.fixed })]}
       >
-        {this.$slots.default}
+        {this.slots()}
       </div>
     );
   }
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
index 7afd0326b..4bb9e7212 100644
--- a/packages/tabs/index.js
+++ b/packages/tabs/index.js
@@ -418,10 +418,10 @@ export default sfc({
         <div ref="content" class={bem('content', { animated })}>
           {animated ? (
             <div class={bem('track')} style={this.trackStyle}>
-              {this.$slots.default}
+              {this.slots()}
             </div>
           ) : (
-            this.$slots.default
+            this.slots()
           )}
         </div>
       </div>
diff --git a/packages/uploader/index.js b/packages/uploader/index.js
index d7986be7d..dace19820 100644
--- a/packages/uploader/index.js
+++ b/packages/uploader/index.js
@@ -95,7 +95,7 @@ export default sfc({
 
     return (
       <div class={bem()}>
-        {this.$slots.default}
+        {this.slots()}
         <input
           { ...{ attrs: this.$attrs } }
           ref="input"
diff --git a/packages/utils/index.js b/packages/utils/index.js
index d3c7d3549..5384bb6bd 100644
--- a/packages/utils/index.js
+++ b/packages/utils/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-export { use, useSlots } from './use';
+export { use } from './use';
 
 export const isServer = Vue.prototype.$isServer;
 
diff --git a/packages/utils/use/index.js b/packages/utils/use/index.js
index e0647c86b..c2f59af97 100644
--- a/packages/utils/use/index.js
+++ b/packages/utils/use/index.js
@@ -6,12 +6,3 @@ export function use(name) {
   name = 'van-' + name;
   return [useSfc(name), useBem(name), useI18n(name)];
 }
-
-export function useSlots({ $slots, $scopedSlots }) {
-  return (name, props) => {
-    if ($scopedSlots[name]) {
-      return $scopedSlots[name](props);
-    }
-    return $slots[name];
-  };
-}
diff --git a/packages/utils/use/sfc.js b/packages/utils/use/sfc.js
index 593ac8bd4..183a392b7 100644
--- a/packages/utils/use/sfc.js
+++ b/packages/utils/use/sfc.js
@@ -3,6 +3,7 @@
  */
 import '../../locale';
 import { camelize } from '..';
+import SlotsMixin from '../../mixins/slots';
 
 const arrayProp = {
   type: Array,
@@ -50,6 +51,8 @@ function functional(sfc) {
 export default name => (sfc, isFunctional) => {
   sfc.name = name;
   sfc.install = install;
+  sfc.mixins = sfc.mixins || [];
+  sfc.mixins.push(SlotsMixin);
 
   if (sfc.props) {
     defaultProps(sfc.props);
diff --git a/yarn.lock b/yarn.lock
index c4e218dad..f9927a27f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10274,10 +10274,10 @@ vue-router@^3.0.2:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
   integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
 
-vue-server-renderer@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.1.tgz#a5076076ea1b1cd517e8556ea5362232d042606f"
-  integrity sha512-fpKjWYYqKceiJIJGigTcXBabbMi6g3KANhf64Gn4AzFo7bS/wzZkqCQYLRMjAjj6LQzfa7sPJBPSpMdpq/UAfg==
+vue-server-renderer@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.2.tgz#89faa6d87e94f9333276a4ee9cd39bece97059db"
+  integrity sha512-UAAKbYhcT9WRP7L4aRR/c6e/GXBj5lwR9H8AQ+b/lbwVwMauHyYNdhQzFmLFZfujNAjZK6+mQQVtdMoa2J8Y5g==
   dependencies:
     chalk "^1.1.3"
     hash-sum "^1.0.2"
@@ -10296,10 +10296,10 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.1.tgz#b6a1b622acc602a556dcca2c1bf5d05afc7ac077"
-  integrity sha512-lHEnUkFcTPd99CprdTdA43hj29V1UlJiefCXWP3jJMjrz6wD1FQWEOCiCjwMXDEBstCWYscVjERtwzL0mJ1lJA==
+vue-template-compiler@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.2.tgz#6230abf7ca92d565b7471c0cc3f54d5b12aa48e7"
+  integrity sha512-2dBKNCtBPdx1TFef7T4zwF8IjOx2xbMNryCtFzneP+XIonJwOtnkq4s1mhKv8W79gXcGINQWtuaxituGAcuSnA==
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -10314,10 +10314,10 @@ vue-template-es2015-compiler@^1.8.2:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.8.2.tgz#dd73e80ba58bb65dd7a8aa2aeef6089cf6116f2a"
   integrity sha512-cliV19VHLJqFUYbz/XeWXe5CO6guzwd0yrrqqp0bmjlMP3ZZULY7fu8RTC4+3lmHwo6ESVDHFDsvjB15hcR5IA==
 
-vue@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.1.tgz#2167a19e6489ff8082388f7c5f5caf56a32ddba9"
-  integrity sha512-ka6pgKZSa44+/11g+sD99Akajt0GceTnT8tagqLrQovXptgwaiLaEOHzMA/FLR07lGIfIR2UTHb69bTRBN71dA==
+vue@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.2.tgz#1cc9c9c8f7ba8df45e9b97c284947de78b76301c"
+  integrity sha512-NZAb0H+t3/99g2nygURcEJ+ncvzNLPiEiFI5MGhc1Cjsw5uYprF+Ol7SOd1RXPcmVVzK7jUBl0th2tNgt+VQDg==
 
 w3c-hr-time@^1.0.1:
   version "1.0.1"