访问属性/一Vuejs组件的方法在全球范围

Question

我想创建一个自定义组件，并使用它像

<div id="app"> 
    <router-view /> 
    <my-custom-loader /> 
</div> 

我的组件有一些方法，我想在全球范围内使用像

this.$loader.show(); 
this.$loader.hide(); 

任何地方

我可以创建组件，但不知道如何注入它的方法/属性，以便它在任何地方都可用。

Answer 1

组件在vuejs中创建封装范围。

AFAIK你不应该这样做，因为我觉得这更像是一个解决方法，这是一个完美的vuejs做法。

您可以在<my-custom-loader>组件上设置参考。

<div id="app"> 
    <router-view /> 
    <my-custom-loader ref="loader"/> 
</div> 

由于组件看起来像根VUE实例安装在#app的孩子，你可以用它接取$裁判

var vm = new Vue({ 
    el: '#app' 
}); 

//my-custom-loader component's instance 
var loader = vm.$rers.loader; 

然后你可以设置这个loader这是我定制装载机组件的实例在Vue.prototype上。现在，这允许您使用this.$loader

Vue.prototype.$loader = loader; 

现在你可以使用

this.$loader.hide(); 
this.$loader.show(); 

牢记利用裁判的警告作为docs

提到接取它的方法接取任何组件$loader$refs只在组件被渲染后才被填充，并且它不是被动的。它只是作为直接操纵孩子的逃生口 - 你应该避免在模板或计算属性中使用$refs。

至于我，我推荐你使用custom events或注册一个全球event bus或使用vuex如果你的应用程序是非常大的，有复杂的状态管理