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

父组件中有两个子组件。如果在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();
  },
};