diff --git a/src/views/demo/reactiveDemo/components/child.vue b/src/views/demo/reactiveDemo/components/child.vue
new file mode 100644
index 0000000..f8e06ac
--- /dev/null
+++ b/src/views/demo/reactiveDemo/components/child.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>Demo 更改Table显示</div>
+</template>
+
+<script>
+export default {
+    name: 'index',
+    inject: ['currentComponent', 'refresh'],
+    data() {
+        return {};
+    },
+    mounted() {
+        this.hasPermission();
+    },
+    methods: {
+        hasPermission() {
+            let allComponents = this.currentComponent();
+            allComponents.forEach((item) => {
+                if (item.name === 'Table') {
+                    item.hidden = false;
+                }
+            });
+            console.log(allComponents);
+            /**
+             * 第一种方法：直接调用refresh方法刷新页面
+             */
+            // this.refresh();
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/demo/reactiveDemo/config/index.js b/src/views/demo/reactiveDemo/config/index.js
new file mode 100644
index 0000000..ee50ada
--- /dev/null
+++ b/src/views/demo/reactiveDemo/config/index.js
@@ -0,0 +1,23 @@
+export const allComponents = [
+    {
+        name: 'Button',
+        icon: 'el-icon-s-tools'
+    },
+    {
+        name: 'Input',
+        icon: 'el-icon-s-tools'
+    },
+    {
+        name: 'Table',
+        icon: 'el-icon-s-tools',
+        hidden: true
+    },
+    {
+        name: 'Form',
+        icon: 'el-icon-s-tools'
+    },
+    {
+        name: 'Select',
+        icon: 'el-icon-s-tools'
+    }
+];
diff --git a/src/views/demo/reactiveDemo/index.vue b/src/views/demo/reactiveDemo/index.vue
new file mode 100644
index 0000000..392ca9f
--- /dev/null
+++ b/src/views/demo/reactiveDemo/index.vue
@@ -0,0 +1,50 @@
+<template>
+    <main>
+        <div
+            v-for="component in currentComponent"
+            :key="component.name"
+            v-show="!component.hidden"
+        >
+            <div>{{ component.name }}</div>
+        </div>
+
+        <ChildDemo />
+        <button @click="refresh">强制刷新</button>
+    </main>
+</template>
+
+<script>
+import ChildDemo from './components/child.vue';
+import { allComponents } from './config/index';
+
+export default {
+    components: { ChildDemo },
+    data() {
+        return {
+            // 重点在这里，这里将数据形成响应式
+            cpt: allComponents,
+        };
+    },
+    provide() {
+        return {
+            currentComponent: () => this.currentComponent,
+            refresh: this.refresh,
+        };
+    },
+    computed: {
+        currentComponent() {
+            /**
+             * 第二种方法，通过将数据放在data中, 形成数据响应式，
+             * 然后在computed中返回数据，这样在provide下发给子组件时，子组件直接修改数据也可以看到修改
+             */
+            // return allComponents; //这种返回的数据子组件修改不会刷新，因为数据不是响应式
+            return this.cpt; //这种返回的数据子组件修改会刷新，因为数据是响应式
+        },
+    },
+    methods: {
+        refresh() {
+            this.$forceUpdate();
+        },
+    },
+};
+</script>