Vue组件挂载到全局方法中

组件:src/components/loading/loading.vue

src/components/loading/index.js

import Vue from 'vue'

import loading from './loading.vue'

const MyLoading = Vue.extend(loading)

const install = () => {

    Vue.prototype.$loading = () => {

        var instance = new MyLoading({

            data:{

                visible:true

            }

        })

        instance.id = 'loading-component'

        instance.vm = instance.$mount()

        instance.vm.close = () => {

            instance.visible = false

        }

        document.body.appendChild(instance.vm.$el)

        return instance.vm

    }

}

export default {

    install

}

然后在main.js中引入

import Loading from './components/loading/index.js'

Vue.use(Loading)

然后在每个组件中都可以通过方法调用了。(示例3秒后关闭loading)

var loading = this.$loading()

setTimeout(()=>{

    loading.close();//

},3000)

欢迎指正。。

你可能感兴趣的:(Vue组件挂载到全局方法中)