[Vuejs]-Vue.js: change parent variable from multiple layer down

by

1👍

✅

There are several options, but the best way to answer the questions is to register as a global plug-in.

See the following solutions:

  1. Create loading component and register it as a Vue component.
// loadingDialog.vue
<template>
<!-- ... -->
</template>

<script>
import { Loading } from 'path' // Insert the `loading` declared in number 2.

export default {
 beforeMount () {
   Loading.event.$on('show', () => {
     this.show()
   })
 },
 methods: {
   show () {}
 }
}
</script>
  1. Creating a global plug-in
const loading = {
 install (Vue, opt = {}) {
  let constructor = Vue.extend(LOADING_COMPONENT)
  let instance = void 0

  if (this.installed) {
    return
  }

  this.installed = true

  Vue.prototype.$loadingDialog = {
    show () {
      if (instance) {
        instance.show()  // function of loading component
        return
      }

      instance = new constructor({
        el: document.createElement('div')
      })

      document.body.appendChild(instance.$el)
      instance.show()  // function of loading component
    }
  }
 }
}
  1. All components are accessible through the prototype.
this.$loadingDialog.show() // or hide()

Note, it is recommended that you control the api communication using the axios in the request or response interceptorof the axios at once.

👤Dev.DY

Leave a comment