vue 父子组件传值缓存解决方案

最新推荐文章于 2024-10-08 17:04:08 发布

夹道欢呼

最新推荐文章于 2024-10-08 17:04:08 发布

阅读量1.4k

点赞数

文章标签： vue.js 缓存前端

本文链接：https://blog.youkuaiyun.com/qq_37130872/article/details/122209553

版权

在平时开发中,经常会出现例如(tab切换组件的情况)切换的页面均为子组件,会出现父组件传值缓存的情况--------第一次进入页面数据不变

原因:因为进入页面请求的接口是异步请求,数据没有及时更新

解决方法:

父组件:

组件传值

<Option :content="permissions" v-if="activeName == 0" :Mathrand="Mathrand"></Option>

return:

return {
      Mathrand:100
} //声明一个随机数变量

javascript

    AccessTo(num) {
      this.$ajax.get(this.uri('*********')+num).then(res => {
        this.permissions = res.data.data;
        this.Mathrand = Math.random()  //接口请求完毕以后重新为随机数赋值
      }).catch(err => {
        this.loading = false;
      })
    },

子组件:

接受参数

props: {
    content: {
      type: Object,
      default: () => {}
    },
    Mathrand: {
      type: Number
    }
  }, //接受传递的参数

监听随机数,再做相应操作

  watch: {
    'Mathrand': function (val, nv) {
      this.ReturnsParameter = this.content.template
      const {
        allModerator,
        nowModerator,
        member,
        level,
        assignModeratorId,
        assignMemberId
      } = this.content.template
    }
  },

此方法主要是每次切换组件时,刷新获取父组件传递的新参数