vue 使用this.reload刷新，会刷新父组件

Question

 <el-main>
    <router-view></router-view>
  </el-main>

这是父组件annotation中的路由

const routes = [
  {
    path: '/',
    name: 'annotation',
    component: annotation,
    children: [
      {
        path: '/sentiment_Customer',
        name: 'sentiment_customer',
        component: sentimentCustomer
      },
      {
        path: '/satisfaction',
        name: 'satisfaction',
        component: satisfaction
      }
    ]
  },

这是路由里的配置

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

<script>
export default {
  name: 'app',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style>
  #app,body,html{
    margin:0;
    width: 100%;
    height: 100%;
  }
</style>

这是app.vue配置的reload

async created () {
    console.log(1)
    await this.getConfig()
    if (!localStorage.getItem('business') || !localStorage.getItem('annotation')) return this.$message.error('请先选择行业')
    this.business = this.$store.state.business
    this.annotation = this.$store.state.annotation
  }
}

这是在父组件annotation中created钩子里面，打印了一个1

 const { data: res } = await postannotation({ business: this.$store.state.business, annotation: this.$store.state.annotation, data: arr })
      if (res.code === 0) {
        this.reload()
      } else {
        this.$message.error('标注有误，请重新标注')
      }

这是子组件satisfaction中发完请求后this.reload

这时控制台打印了1，父组件也被刷新了。

this.reload不应该只刷新当前组件吗，为什么还刷新了父组件

Answer 1

后来发现，应该把整个reload的定义放在父组件而不是app.vue里面，app.vue里面控制的v-if必然会导致父组件的刷新，定义在父组件的话，就只会刷新子组件

Answer 2

你这里reload怎么既是变量又是方法