diff --git a/example/docs/zh-CN/index.md b/example/docs/zh-CN/index.md
index df494a40c3a1bc235ee94efb3b4b7cc2ceed33c0..f9455a3c5a504633411dea6f745cea5caa8de325 100644
--- a/example/docs/zh-CN/index.md
+++ b/example/docs/zh-CN/index.md
@@ -1,4 +1,3 @@
-
 <fieldset class="layui-elem-field layui-field-title">
     <legend>安装</legend>
 </fieldset>
@@ -11,7 +10,7 @@ pnpm install @layui/layer-vue
     <legend>消息</legend>
 </fieldset>
 
-::: demo 
+::: demo
 
 <template>
     <button @click="msg">普通消息</button>
@@ -22,7 +21,6 @@ pnpm install @layui/layer-vue
 </template>
 
 <script>
-import { layer } from "../../../src/index"
 
 const msg = function() {
     layer.msg("普通消息", { time: 1000 })
@@ -61,7 +59,6 @@ const info = function() {
 </template>
 
 <script setup>
-import { layer } from "../../../src/index"
 
 const load1 = function() {
     layer.load(0, {time: 2000})
@@ -94,13 +91,13 @@ const load4 = function() {
     <button @click="openOffset">指定位置</button>
     <button @click="openIframe">远程窗体</button>
     <button @click="openHtml">HTML片段</button>
+    <button @click="openVNode">vNode</button>
     <button @click="openMaxmin">缩小放大</button>
     <button @click="openResize">尺寸拉伸</button>
 </template>
 
 <script setup>
 import { ref, h } from 'vue'
-import { layer } from "../../../src/index"
 
 const open = function() {
     layer.open({
@@ -146,6 +143,14 @@ const openHtml = function() {
     })
 }
 
+const openVNode = function() {
+    layer.open({
+        type: 1,
+        title: "vNode",
+        content: h('button', { style: 'color: red' },'vNode按钮')
+    })
+}
+
 const openMaxmin = function() {
     layer.open({
         type: 1,
@@ -180,7 +185,6 @@ const openResize = function() {
 
 <script setup>
 import { ref } from 'vue'
-import { layer } from "../../../src/index"
 
 const openConfirm1 = function() {
     layer.confirm("layui-vue 1.0.0 已经发布")
@@ -208,7 +212,6 @@ const openConfirm2 = function() {
 
 <script setup>
 import { ref } from 'vue'
-import { layer } from "../../../src/index"
 
 const openTop = function() {
     layer.drawer({
@@ -243,4 +246,139 @@ const openRight = function() {
 }
 </script>
 
-:::
\ No newline at end of file
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>函数响应式</legend>
+</fieldset>
+
+::: demo
+
+<template>
+  <input type="text" v-model="content" placeholder="尝试更改这里的内容" style="margin-bottom:15px" /><br>
+  <button @click="openTextReactive">文本</button>
+  <button @click="openHtmlReactive">Html</button>
+  <button @click="openIframeReactive">iframe</button>
+  <button @click="openVNodeReactive">VNode</button>
+  <button @click="openReactive">v-model</button>
+</template>
+
+<script setup>
+import { ref, h } from 'vue'
+import { useLayer } from  "../../../src/index"
+
+const layer = useLayer()
+const title = ref('标题')
+const content = ref(null)
+
+// 文本响应式
+const openTextReactive = () => {
+  title.value = '文本'
+  content.value = `默认文本`
+  layer.open({
+    title: () => title.value,
+    content: () => content.value,
+    area: ['350px', '240px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// HTML 响应式
+const openHtmlReactive = () => {
+  title.value = 'HTML'
+  content.value = `<h1>hello<h1/>`
+  layer.open({
+    title: () => title.value,
+    content: () => content.value,
+    isHtmlFragment: true,
+    area: ['350px', '240px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// iframe 响应式
+const openIframeReactive = () => {
+  title.value = 'iframe'
+  content.value = `http://layui-vue.pearadmin.com`
+  layer.open({
+    type: 2,
+    title: () => title.value,
+    content: () => content.value,
+    area: ['1360px','700px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// VNode响应式
+const openVNodeReactive = () => {
+  title.value = 'VNode'
+  content.value = `h('button', { style: 'border-color: #8897BA'},'尝试将button改为h1')`
+  // eval不是必须的,此处只是为了转换输入框 value
+  layer.open({
+    title: () => title.value,
+    content: () => eval(content.value),
+    area: ['350px', '240px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// v-model 双向绑定
+const openReactive = () => {
+  title.value = '双向绑定'
+  content.value = `layer-vue`
+  layer.open({
+    title: () => title.value,
+    content: () => h("input", {
+      value: content.value,
+      onInput: (e) => content.value = e.target.value
+    }),
+    area: ['350px', '240px'],
+    shade: false,
+  })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>VNode组件</legend>
+</fieldset>
+
+::: demo
+
+<template>
+  <button @click="openComponent">组件</button>
+  <span>{{ userData }}</span>
+</template>
+
+<script setup>
+import { ref, reactive, h } from 'vue'
+import { useLayer } from  "../../../src/index"
+import FormVNode from '../../src/components/demo/FormVNode.vue'
+
+// content 选项 VNode 类型是作为 layer 的子组件渲染的,所以可以用 props 和 emit 来通信
+// 注意子组件发出的事件需要用 onXXX（）来监听
+const userData = reactive({
+  username:'',
+  password:'',
+})
+const openComponent = () => {
+  layer.open({
+    title: '测试',
+    content: h(FormVNode, { 
+      userData, 
+      onOk(res){
+        layer.msg(res)
+      }
+      }),
+    area: ['350px', '240px'],
+    shade: false,
+  })
+}
+</script>
+
+:::
diff --git a/example/src/components/demo/FormVNode.vue b/example/src/components/demo/FormVNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dbbd8b0aa8243d52a4dbaf3dfbd458a2bec99600
--- /dev/null
+++ b/example/src/components/demo/FormVNode.vue
@@ -0,0 +1,24 @@
+<template>
+  <form>
+    username:
+    <input type="text" name="username" v-model="userData.username" />
+    <br />password:
+    <input type="password" name="password" v-model="userData.password" />
+    <br />
+    <button type="button" @click="$emit('ok', props.userData)">确认</button>
+    <button type="reset" @click="resetClick">重置</button>
+  </form>
+</template>
+<script setup>
+import { layer } from "../../../../src/index"
+
+const props = defineProps({
+  userData: Object
+})
+
+const resetClick = function () {
+  props.userData.username = "";
+  props.userData.password = "";
+}
+
+</script>
\ No newline at end of file