diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md
index 1d9149a30..9e2879f93 100644
--- a/examples/docs/en-US/message.md
+++ b/examples/docs/en-US/message.md
@@ -5,6 +5,16 @@
         this.$message('This is a message.');
       },
 
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      },
+
       open2() {
         this.$message({
           message: 'Congrats, this is a success message.',
@@ -65,11 +75,12 @@ Used to show feedback after an activity. The difference with Notification is tha
 
 Displays at the top, and disappears after 3 seconds.
 
-:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string as parameter, and it will be shown as the main body.
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.
 
 ```html
 <template>
   <el-button :plain="true" @click="open">Show message</el-button>
+  <el-button :plain="true" @click="openVn">VNode</el-button>
 </template>
 
 <script>
@@ -77,6 +88,16 @@ Displays at the top, and disappears after 3 seconds.
     methods: {
       open() {
         this.$message('This is a message.');
+      },
+      
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
       }
     }
   }
@@ -196,7 +217,7 @@ You can call `Message.closeAll()` to manually close all the instances.
 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| message | message text | string | — | — |
+| message | message text | string / VNode | — | — |
 | type | message type | string | success/warning/info/error | info |
 | iconClass | custom icon's class, overrides `type` | string | — | — |
 | customClass | custom class name for Message | string | — | — |
diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md
index 1da06e668..29b872236 100644
--- a/examples/docs/zh-CN/message.md
+++ b/examples/docs/zh-CN/message.md
@@ -5,6 +5,16 @@
         this.$message('这是一条消息提示');
       },
 
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      },
+
       open2() {
         this.$message({
           message: '恭喜你，这是一条成功消息',
@@ -70,6 +80,7 @@
 ```html
 <template>
   <el-button :plain="true" @click="open">打开消息提示</el-button>
+  <el-button :plain="true" @click="openVn">VNode</el-button>
 </template>
 
 <script>
@@ -77,6 +88,16 @@
     methods: {
       open() {
         this.$message('这是一条消息提示');
+      },
+
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
       }
     }
   }
@@ -196,7 +217,7 @@ import { Message } from 'element-ui';
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| message | 消息文字 | string | — | — |
+| message | 消息文字 | string / VNode | — | — |
 | type | 主题 | string | success/warning/info/error | info |
 | iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
 | customClass | 自定义类名 | string | — | — |
diff --git a/packages/message/src/main.js b/packages/message/src/main.js
index 944c2bbf4..f707613a0 100644
--- a/packages/message/src/main.js
+++ b/packages/message/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { PopupManager } from 'element-ui/src/utils/popup';
+import { isVNode } from 'element-ui/src/utils/vdom';
 let MessageConstructor = Vue.extend(require('./main.vue'));
 
 let instance;
@@ -20,11 +21,14 @@ var Message = function(options) {
   options.onClose = function() {
     Message.close(id, userOnClose);
   };
-
   instance = new MessageConstructor({
     data: options
   });
   instance.id = id;
+  if (isVNode(instance.message)) {
+    instance.$slots.default = [instance.message];
+    instance.message = null;
+  }
   instance.vm = instance.$mount();
   document.body.appendChild(instance.vm.$el);
   instance.vm.visible = true;
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index bbf11a3c9..77b71937f 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -8,7 +8,7 @@
       @mouseleave="startTimer">
       <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
       <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
-        <p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p>
+        <slot><p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p></slot>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
     </div>