訪問屬性/一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如果你的應用程序是非常大的，有複雜的狀態管理