From 7927050c3470c7f9c74dc7c593c8f0fa55041a43 Mon Sep 17 00:00:00 2001
From: lichaojun <lichaojun@cdqcp.com>
Date: Fri, 9 May 2025 04:51:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20computed=E4=BD=BF=E7=94=A8provide?=
 =?UTF-8?q?=E4=B8=8B=E5=8F=91=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E6=95=B0=E6=8D=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/reactiveDemo/components/child.vue    | 33 ++++++++++++
 src/views/demo/reactiveDemo/config/index.js   | 23 +++++++++
 src/views/demo/reactiveDemo/index.vue         | 50 +++++++++++++++++++
 3 files changed, 106 insertions(+)
 create mode 100644 src/views/demo/reactiveDemo/components/child.vue
 create mode 100644 src/views/demo/reactiveDemo/config/index.js
 create mode 100644 src/views/demo/reactiveDemo/index.vue

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>