Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail the method of "this.$refs.tabs.refreshs () refresh components in vue", with detailed content, clear steps and proper handling of details. I hope that this article "this.$refs.tabs.refreshs () refresh components in vue" can help you solve your doubts.

This.$refs.tabs.refreshs () refresh component

When you change the user information, you need to refresh the page or component.

First: refresh the current component

Define a method to request user information, calling when needed:

SessionStorage.setItem ('userInfo',JSON.stringify (this.userInfo)); / / get the second kind from the session cache: when refreshing the parent component

Where a subcomponent is needed:

This.$emit ('refresh')

Parent component:

Methods: {refresh () {this.userInfo = JSON.parse (sessionStorage.getItem ('userInfo'));}}, third type: non-relational components

Parent component:

/ / components to be refreshed (non-relational components) methods: {refresh () {this.$refs.tabs.refreshs (); / / refresh sub-components. Top-bar is the name of the vue component instance, the name referenced when tabs, refreshs is the method included with Vue}}, and the vue component is reloaded (refreshed)

Methods: use v-if to control router-view, and implement a refresh method in the root component APP.vue.

/ / export default {data () {return {isRouterAlive: true}}, methods: {reload () {this.isRouterAlive = false this.$nextTick (() = > (this.isRouterAlive = true))}

Then any other routing page that wants to refresh itself can do this:

How this.reload () refreshes the current component

The common content dynamically changes the global parameters, requiring that all requests of the current component be refreshed or reloaded after switching.

Because we have added vue-routerapp.vue to the project, we can achieve the effect of our needs by controlling router-view.

Also use provide/inject, a helper function similar to vuex for personal lists, to introduce (inject) one of your methods across hierarchies.

App.Vue

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

Then add to the component where you modify the global parameters

Data () {return {}}, inject: ['reload'], / / inject this method into this component / /. Call methods in the event: {changed () {this.reload () / / call}} read here, this article "how to refresh components in this.$refs.tabs.refreshs () in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, Welcome to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.