美文网首页
vue结合provide和inject实现跨组件刷新页面

vue结合provide和inject实现跨组件刷新页面

作者: callPromise | 来源:发表于2020-04-20 00:17 被阅读0次

App.vue

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

<script>
  name: "app",
  provide() {
    return {
      reloadApp: this.reloadApp
    }
  },
  data() {
    return {
      isFresh: true
    }
  },
  method: {
    reloadApp() {
      this.isFresh = false
      this.nextTick(()=>{
        this.isFresh = true
      })
    }
  }
</script>

Child.vue

<template>
  <div id="child">
    <button @click="reloadApp" />
  </div>
<template>

<script>
  name: "child",
  inject: ["reloadApp"]
</script>

相关文章