provide与inject 实现不刷新页面 更新页面数据

我们叫这个为静默刷新   

 

// App.vue

<template>
  <div v-if="bol" id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      num: 10,
      fn: this.sendFn,
      that: this,
      reload: this.reload
    }
  },
  data() {
    return {
      appStr: '我是app',
      bol: true
    }
  },
  created() {

  },
  methods: {
    sendFn(str) {
      console.log(str)
    },
    reload() {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

// 404.vue

<template>
  <div class="wscn-http404-container">
    <h1>{{ num }}</h1>
    <el-button @click="fn(999)">传值给App</el-button>
    <el-button @click="btnClick">获取this</el-button>
    <hr>
 
  </div>
</template>

<script>
export default {
  name: 'Page404',
  inject: ['num', 'fn', 'that', 'reload'],
  computed: {
    message() {
      return 'The webmaster said that you can not enter this page...'
    }
  },
  methods: {
    btnClick() {
      // console.log(this.that.appStr)
      this.reload()
    }
  }
}
</script>