前端开发记录 | vue中调用另一个页面的方法

这是我参与更文挑战的第10天，活动详情查看：更文挑战

一、前言

今天在项目开发中，完成了个文件上传的功能，前面碰到一个问题，就是文件上传成功后，已经返回了图片url，但是怎么也不回显这个图片，浏览器中出现的问题是：

https://platform.giantenergy.com.cn/filecenter/sub-station/PersonalInfo/c30.png 403 (Forbidden)

开启reference告诉你从哪个页面跳转过来，最终在index.html中加上这句话后就回显成功了

<meta name="referrer" content="no-referrer" />

当然，这不是本篇文章的重点，后来文件上传成功后，却无法通知右上角的小图片也随着替换掉。

也就是说虽然我上传成功了，也把缓存中的user信息给更新了，但是header中的小图片是在登录的适合从缓存中加载的，后面就没有加载了。因此在更改用户信息成功之后，需要通知另一个页面做个更新操作。这也就是调用另一个页面的方法。

二、on和 emit

$emit(eventName): 触发事件

$on(eventName,callBack): 监听事件

这二者的关系就是，如果把 Vue 看成一个家庭（相当于一个单独的components），女主人一直在家里指派（emit）男人做事，而男人一直监听着（on）女主人的(emit)里的eventName所触发的事件，一旦emit事件被触发，on 则监听到emit所派发的事件，就执行这个on方法。

具体的操作可以看官方文档

三、开始整改

3.1 给它们一个中转站，new 一个vue实例

创建一个clearStore.js，添加内容：

import Vue from 'vue'
export default new Vue()

3.2 然后两个页面都引入这个中转站：

import Utils from '../../../clearStore'

3.3 调用方的写法

 onSubmit(){
        let form = this.$data.form
        this.$data.loading = true;
        this.$api.req("/sm/info/user/edit",form,res =>{
          this.$message.success("操作成功")
          // 更新缓存
          store.setUser(res.data)
          this.$data.loading = false;
          Utils.$emit('demo','msg') // 执行成功后调用该emit方法
        },res => {
          this.$message.error(res.msg)
          this.$data.loading = false;
        })
      },

3.4 被调用方的写法

 mounted() {
    var that =this
    Utils.$on('demo',function (msg) {
      that.init()
    })
  },
  
init(){
   let user = StoreService.getUser()
   this.$data.squareUrl = user.avatar
},

最后达到这个目的：