diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
index 25382e1c9..d1a39d2c9 100644
--- a/packages/cell-group/index.js
+++ b/packages/cell-group/index.js
@@ -2,19 +2,25 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('cell-group');
 
-export default sfc({
-  props: {
-    border: {
-      type: Boolean,
-      default: true
+export default sfc(
+  {
+    props: {
+      border: {
+        type: Boolean,
+        default: true
+      }
+    },
+
+    render(h, context) {
+      return (
+        <div
+          class={[bem(), { 'van-hairline--top-bottom': context.props.border }]}
+          {...context.data}
+        >
+          {context.children}
+        </div>
+      );
     }
   },
-
-  render(h) {
-    return (
-      <div class={[bem(), { 'van-hairline--top-bottom': this.border }]}>
-        {this.$slots.default}
-      </div>
-    );
-  }
-});
+  true
+);
diff --git a/packages/goods-action/index.js b/packages/goods-action/index.js
index c8d9873cd..d997bfe5f 100644
--- a/packages/goods-action/index.js
+++ b/packages/goods-action/index.js
@@ -2,8 +2,15 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('goods-action');
 
-export default sfc({
-  render(h) {
-    return <div class={bem()}>{this.$slots.default}</div>;
-  }
-});
+export default sfc(
+  {
+    render(h, context) {
+      return (
+        <div class={bem()} {...context.data}>
+          {context.children}
+        </div>
+      );
+    }
+  },
+  true
+);
diff --git a/packages/icon/index.js b/packages/icon/index.js
index 453ee28b1..b0b6a4ade 100644
--- a/packages/icon/index.js
+++ b/packages/icon/index.js
@@ -4,41 +4,41 @@ import isSrc from '../utils/validate/src';
 
 const [sfc] = use('icon');
 
-export default sfc({
-  props: {
-    name: String,
-    size: String,
-    color: String,
-    info: [String, Number],
-    classPrefix: {
-      type: String,
-      default: 'van-icon'
+export default sfc(
+  {
+    props: {
+      name: String,
+      size: String,
+      color: String,
+      info: [String, Number],
+      classPrefix: {
+        type: String,
+        default: 'van-icon'
+      }
+    },
+
+    render(h, context) {
+      const { props } = context;
+      const urlIcon = isSrc(props.name);
+
+      return (
+        <i
+          class={[
+            props.classPrefix,
+            urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
+          ]}
+          style={{
+            color: props.color,
+            fontSize: props.size
+          }}
+          {...context.data}
+        >
+          {context.children}
+          {urlIcon && <img src={props.name} />}
+          <Info info={props.info} />
+        </i>
+      );
     }
   },
-
-  computed: {
-    isSrc() {
-      return isSrc(this.name);
-    }
-  },
-
-  render(h) {
-    return (
-      <i
-        class={[
-          this.classPrefix,
-          this.isSrc ? 'van-icon--image' : `${this.classPrefix}-${this.name}`
-        ]}
-        style={{
-          color: this.color,
-          fontSize: this.size
-        }}
-        {...{ on: this.$listeners }}
-      >
-        {this.$slots.default}
-        {this.isSrc && <img src={this.name} />}
-        <Info info={this.info} />
-      </i>
-    );
-  }
-});
+  true
+);
diff --git a/packages/info/index.js b/packages/info/index.js
index 8a9f5a33c..e8bb3b5e6 100644
--- a/packages/info/index.js
+++ b/packages/info/index.js
@@ -2,12 +2,21 @@ import { use, isDef } from '../utils';
 
 const [sfc, bem] = use('info');
 
-export default sfc({
-  props: {
-    info: [String, Number]
-  },
+export default sfc(
+  {
+    props: {
+      info: [String, Number]
+    },
 
-  render(h) {
-    return isDef(this.info) && <div class={bem()}>{this.info}</div>;
-  }
-});
+    render(h, { props, data }) {
+      return (
+        isDef(props.info) && (
+          <div class={bem()} {...data}>
+            {props.info}
+          </div>
+        )
+      );
+    }
+  },
+  true
+);
diff --git a/packages/loading/index.js b/packages/loading/index.js
index 057f6871f..f11dd9027 100644
--- a/packages/loading/index.js
+++ b/packages/loading/index.js
@@ -3,50 +3,53 @@ import { use } from '../utils';
 const [sfc, bem] = use('loading');
 const DEFAULT_COLOR = '#c9c9c9';
 
-export default sfc({
-  props: {
-    size: String,
-    type: {
-      type: String,
-      default: 'circular'
+export default sfc(
+  {
+    props: {
+      size: String,
+      type: {
+        type: String,
+        default: 'circular'
+      },
+      color: {
+        type: String,
+        default: DEFAULT_COLOR
+      }
     },
-    color: {
-      type: String,
-      default: DEFAULT_COLOR
+
+    render(h, context) {
+      const { color, size, type } = context.props;
+
+      const colorType = color === 'white' || color === 'black' ? color : '';
+
+      const style = {
+        color: color === 'black' ? DEFAULT_COLOR : color,
+        width: size,
+        height: size
+      };
+
+      const Spin = [];
+      if (type === 'spinner') {
+        for (let i = 0; i < 12; i++) {
+          Spin.push(<i />);
+        }
+      }
+
+      const Circular = type === 'circular' && (
+        <svg class={bem('circular')} viewBox="25 25 50 50">
+          <circle cx="50" cy="50" r="20" fill="none" />
+        </svg>
+      );
+
+      return (
+        <div class={bem([type, colorType])} style={style} {...context.data}>
+          <span class={bem('spinner', type)}>
+            {Spin}
+            {Circular}
+          </span>
+        </div>
+      );
     }
   },
-
-  render(h) {
-    const { color, size, type } = this;
-
-    const colorType = color === 'white' || color === 'black' ? color : '';
-
-    const style = {
-      color: color === 'black' ? DEFAULT_COLOR : color,
-      width: size,
-      height: size
-    };
-
-    const Spin = [];
-    if (type === 'spinner') {
-      for (let i = 0; i < 12; i++) {
-        Spin.push(<i />);
-      }
-    }
-
-    const Circular = type === 'circular' && (
-      <svg class={bem('circular')} viewBox="25 25 50 50">
-        <circle cx="50" cy="50" r="20" fill="none" />
-      </svg>
-    );
-
-    return (
-      <div class={bem([type, colorType])} style={style}>
-        <span class={bem('spinner', type)}>
-          {Spin}
-          {Circular}
-        </span>
-      </div>
-    );
-  }
-});
+  true
+);
diff --git a/packages/utils/use/sfc.js b/packages/utils/use/sfc.js
index 11516b21b..257108293 100644
--- a/packages/utils/use/sfc.js
+++ b/packages/utils/use/sfc.js
@@ -30,10 +30,17 @@ function install(Vue) {
   Vue.component((camelize(`-${name}`)), this);
 }
 
-export default name => sfc => {
+export default name => (sfc, functional) => {
   sfc.name = name;
   sfc.install = install;
-  sfc.props && defaultProps(sfc.props);
+
+  if (sfc.props) {
+    defaultProps(sfc.props);
+  }
+
+  if (functional) {
+    sfc.functional = true;
+  }
 
   return sfc;
 };