diff --git a/components/comment/index.jsx b/components/comment/index.jsx
index 588849141..d64d97c60 100644
--- a/components/comment/index.jsx
+++ b/components/comment/index.jsx
@@ -1,7 +1,7 @@
+import { inject } from 'vue';
 import PropsTypes from '../_util/vue-types';
-import { getComponentFromProp, getListeners } from '../_util/props-util';
+import { getComponent } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
-import Base from '../base';
 export const CommentProps = {
   actions: PropsTypes.array,
   /** The element to display as the comment author. */
@@ -19,8 +19,10 @@ export const CommentProps = {
 const Comment = {
   name: 'AComment',
   props: CommentProps,
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   methods: {
     getAction(actions) {
@@ -41,11 +43,11 @@ const Comment = {
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('comment', customizePrefixCls);
 
-    const actions = getComponentFromProp(this, 'actions');
-    const author = getComponentFromProp(this, 'author');
-    const avatar = getComponentFromProp(this, 'avatar');
-    const content = getComponentFromProp(this, 'content');
-    const datetime = getComponentFromProp(this, 'datetime');
+    const actions = getComponent(this, 'actions');
+    const author = getComponent(this, 'author');
+    const avatar = getComponent(this, 'avatar');
+    const content = getComponent(this, 'content');
+    const datetime = getComponent(this, 'datetime');
 
     const avatarDom = (
       <div class={`${prefixCls}-avatar`}>
@@ -79,9 +81,9 @@ const Comment = {
         {contentDom}
       </div>
     );
-    const children = this.$slots.default;
+    const children = this.$slots.default && this.$slots.default();
     return (
-      <div class={prefixCls} {...{ on: getListeners(this) }}>
+      <div class={prefixCls}>
         {comment}
         {children ? this.renderNested(prefixCls, children) : null}
       </div>
@@ -90,8 +92,7 @@ const Comment = {
 };
 
 /* istanbul ignore next */
-Comment.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Comment.name, Comment);
+Comment.install = function(app) {
+  app.component(Comment.name, Comment);
 };
 export default Comment;
diff --git a/examples/index.js b/examples/index.js
index 7673c2910..3993276a9 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -2,6 +2,7 @@ import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
 import Button from 'ant-design-vue/button';
+import Comment from 'ant-design-vue/comment';
 import Drawer from 'ant-design-vue/drawer';
 import Affix from 'ant-design-vue/affix';
 import Alert from 'ant-design-vue/alert';
@@ -15,6 +16,7 @@ import 'ant-design-vue/style.js';
 
 createApp(App)
   .use(Button)
+  .use(Comment)
   .use(ConfigProvider)
   .use(Drawer)
   .use(Affix)