监听属性、计算属性、组件间通信，使用案例

需求：

是在一个文件管理页面、点击查看文件的优化记录，根据文件id 去获取不同文件的优化记录.

涉及到组件间通信。我们使用路由传参,路由传参分为query、params传参

我们这里使用编程式query传参

在文件记录页面

查看优化记录按钮方法为

goFileOptimizeHistory(fileId) {
      this.$router.push({path:`/optimizeHistory`,query:{fileId: fileId}})
},

在优化记录页面

使用计算属性、监听属性根据fileId去更新页面

computed: {
    // 使用计算属性定义fileId、当 this.$route.query.fileId 变化时候去计算fileId
    fileId() {
      return this.$route.query.fileId
    },
  },
  watch: {
    // 监听属性、监听fileId的变化、每次变化根据fileId去后端从新获取数据
    fileId:{
      handler(newValue, oldValue) {
        this.queryParams.fileId = newValue;
        this.getList();
      },
    }
  },

这样就是实现了，根据文件id查看了对应的文件优化记录