Vuejs刷新页面子组件数据丢失问题的一点笔记

最新推荐文章于 2024-08-20 09:29:00 发布

jarineee

最新推荐文章于 2024-08-20 09:29:00 发布

阅读量1.8w

点赞数 1

分类专栏： Vue 文章标签： vue-js

本文链接：https://blog.csdn.net/jarineee/article/details/77866091

版权

本文记录了在Vuejs中遇到的子组件数据丢失问题，特别是在页面刷新时。作者分析了问题原因，指出是由于生命周期和计算属性的使用不当导致。解决方案包括在计算属性中添加条件判断，使用watch进行数据初始化，以及避免观察计算属性。最后强调，不要用watch去观察一个计算属性，而应在适当生命周期内处理初始化操作。

摘要由CSDN通过智能技术生成

最近在学Vuejs，发现在路由中给子组件传递数据后，刷新页面出现数据丢失问题。

// 子组件代码
props: {
    // 用于接收父组件的数据goodsData
      goodsData: {
        type: Array,
        required: true
      }
    },
computed: {
      ...

      item () {
         // 计算属性item根据地址栏查询关键字在goodsData中筛选并返回符合条件的数据
         // http://localhost:8080/#/goods/food_detail?i_S=0&i_F=1
        const indexS = this.$route.query.i_S
        const indexF = this.$route.query.i_F
        return this.goodsData[indexS].foods[indexF]
      }
    },