当前位置：首页 > news >正文

vue页面目录菜单有些属性是根据缓存读取的。如果缓存更新了。希望这个菜单也跟着更新。

news 来源：原创 2025/6/3 22:13:31

父组件中有两个子组件。如果在B组件数据更新之后。A组件也跟着一起改变呢？如图如果我右边基本信息里面勾选了高血压，左侧菜单里面也要立刻出现一个高血压随访菜单，如果我取消勾选了左侧菜单就去掉。

左侧菜单的显示和隐藏的数据实际上是放在缓存里面的。所以当右侧数据改变，缓存的数据要更新。然后左侧菜单也要跟着立刻读取最新的数据。

遇到的问题和解决办法：1，怎么在B组件操作A组件呢？解决：使用provide和inject可以在父组件和祖孙组件之间通信，然后使用this.$refs.子组件的函数名。

2，缓存内容改变了但左侧菜单数据没办法及时更新。解决：不能在data里面定义获取缓存。必须重新再调用一次。

说的可能比较抽象。下面看代码

父组件

<template><div class="layout-main"><!-- 左边 --><layout-left ref="compA"></layout-left><!-- 右边 --><layout-right> </layout-right></div>
</template><script>
import layoutLeft from "./two-left.vue";
import layoutRight from "./two-right.vue";export default {provide() {return {reloadComponentA: this.reload,};},components: {layoutLeft,layoutRight,},methods: {reload() {this.$refs.compA.loadData();},},
};
</script>

layout-left组件

created() {this.getData(local.get("healthMessage").healthRecordId);
},
methods: {
//在父组件调用的是这个方法用于更新页面loadData() {this.getData(local.get("healthMessage").healthRecordId);},
//把菜单的数组对象写在methods里面getItems() { 
this.items = [{icon: "iconfont icon-changjingguanli",index: "5",title: "慢病管理",isHide:local.get("healthMessage").diabetesSign == 1 ||local.get("healthMessage").hypertensionSign == 1 ||local.get("healthMessage").copdSign == 1,subs: [{index: "/high-followup",title: "高血压随访",isHide: local.get("healthMessage")? local.get("healthMessage").hypertensionSign == 1 || "": "",},{index: "/diabetes-followup",title: "糖尿病随访",isHide: local.get("healthMessage")? local.get("healthMessage").diabetesSign == 1 || "": "",},{index: "/lung-followup",title: "慢阻肺随访",isHide: local.get("healthMessage")? local.get("healthMessage").copdSign == 1 || "": "",},],
}]}

getData(id) {

...这里是获取接口数据

//重新加载目录。及时更新菜单
this.getItems();
this.$set(this, "items", this.items);

}

two-right

export default {inject: ["reloadComponentA"],

methods:{

//需要更新菜单数据时调用它执行父组件里面的reloadComponentA函数。

   local.set("healthMessage", res.data);this.reloadComponentA();

}

我使用的local.set和local.get是自己封装的。就是重新的读取缓存的。如果需要我也列下来

export default {//取数据get(key) {return JSON.parse(window.localStorage.getItem(key));},//存数据set(key, val) {window.localStorage.setItem(key, JSON.stringify(val));},//删除本地存储中数据remove(key) {window.localStorage.removeItem(key);},//清空本地存储的所有数据clear() {window.localStorage.clear();},
};