How to refresh Vue page using provide and inject

Method 1: Call the function directly

Overload the entire page, both of the following are OK

()

.$()

Method 2: Use provide / inject (static refresh)

Declare a reload refresh function in a higher-order function

<template>
  <div  v-if="show"></div>
</template>
<script>
export default {
  // Control display/hide to achieve refresh  data () {
    return {
      show: true
    }
  },
  // Pass the refresh method to the low-level component  provide () {
    return {
      reload: 
    }
  },
  methods: {
    // Advanced component definition refresh method    reload () {
       = false
      this.$nextTick(() => {
         = true
      })
    }
  }
}
</script>

Use refresh functions in low-order components

<template>
  <div></div>
</template>
<script>
export default {
  inject: ['reload'],
  methods: {
    // Low-level components, refresh    fun () {
      ()
    }
  }
}
</script>

Comparison of advantages

• Calling the function directly in Method 1 will cause the entire website to refresh, which will waste performance and have poor user experience; when refreshing a large website like this, you need to wait a few seconds to see the refreshed animation in the upper left corner of the browser;
• Method 2 uses provide / inject, and the user will not feel refreshed, and the content range of the refreshed page can be controlled, which will be much less wasteful.

The above is the detailed content of the method of refreshing Vue pages using provide and inject. For more information about refreshing Vue pages, please follow my other related articles!