1. Scene
In dealing with the list, there is often the need to refresh the needs of the current page after deleting a data or new data.
2. The problem encountered
1. Re-routing to the current page with vue-router, the page is not refreshed
2. When using window.reload (), or router.go (0) to refresh the entire browser has been re-loaded, flashing, experience is not good
3. Solution
provide / inject compositions
Role: Allows an ancestor component inject a dependency to all future generations, how deep regardless of the component level , and since the establishment of the relationship between the upstream and downstream is always time to take effect.
App.vue:
Statement reload methods to control the router-view display or hide, and thus control the page is loaded again
tableList.vue: (subassembly)
In reload the page depend injection App.vue component provides (provide), and after the completion of logic (delete or add ...), direct this.reload () call, you can refresh the current page.
4.provide / inject Usage
provide: Options should be an object or function returns an object. This object contains attributes which can be injected into the descendants.
inject: a string array, or an object, key object is the local name binding
Tip: provide and inject bindings can not respond. This is deliberate. If you pass an object that can monitor, then the object or its properties can respond.