vue刷新当前页面或者页面某些组件的两个方式

使用v-if结合inject/provide实现页面刷新

在父组件中提供reload方法，通过v-if设置组件的加载与销毁。 将reload方法注入到子组件中，需要刷新时调用父组件的reload.

父组件代码：

<template>
  <div id="app">
        <router-view v-if="isAlive"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       isAlive:true
    }
  },
  methods:{
    reload (){
       this.isAlive = false
       this.$nextTick(function(){
          this.isAlive = true
       })
    }
  },
  components:{
  }
}
</script>

子组件代码：

export default {
      name: "demo",
      inject:['reload'],
      data() {
        return {}
      },
      methods: {
        reflesh(){
          this.reload()
        },
      }
    }

2. 使用组件key来刷新组件

vue使用key标记组件身份，当key改变时就会销毁原始组件，渲染新的组件

<template>
    <div>
        <!-- 父组件 -->
        <div>
            <button @click="reLoad">点击刷新子组件</button>
        </div>
        <!-- 内容库子组件 -->
        <child :key="projectKey" ></child>
    </div>
</template>
 
<script>
import child from '@/components/parent/children'
export default {
    name: 'contentLib',
    components: { child },
    data () {
        return {
            projectKey: 1
        }
    },
    methods: {
        reLoad () {
            this.projectKey = projectKey++
        }
    }
}
</script>