Vue子页面如何修改父页面的值

说明：

Vue子页面是无法直接修改父页面的值的，可以通过调用父页面的方法并传递参数来间接修改父页面的值。具体则是通过provide/inject 组合来实现。

provide/inject :

provide 和 inject 主要在开发高阶插件/组件库时使用。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

具体可参考：https://cn.vuejs.org/v2/api/#provide-inject

案例：

1. 在父页面定义一个方法，并设置形参，然后通过 provide 将其暴露出去。

  export default {
    name: "mymain",
    provide(){
      return{
        updateTitle:this.updateTitle
      }
    },
    data() {
      return {
        pagetitle: "设备管理",
        realtitle: "设备管理",
      };
    },
    methods: {
      updateTitle(titlename){
        this.pagetitle = titlename;
        this.realtitle = titlename;
      }
    }
  }
</script>

2. 在子页面通过 inject 引入父页面暴露的方法，然后在子页面像调用子页面自己的方法那样调用就可以了

<script>

  export default {
    name: "analyse-page",
    inject:['updateTitle'],
    data() {
      return {
        pagetitle: "分析页",
        realtitle: "分析页",
      };
    },
    mounted:function () {
      this.updateTitle(this.pagetitle);
    },
    methods: {

    }
  }
</script>