プロパティへのアクセス/メソッドグローバル

Question

私は、カスタムコンポーネントを作成し、私のコンポーネントは、私はどこでも

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

のように世界的に使用するいくつかのメソッドを持っている

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

ようにそれを使用したいです

コンポーネントを作成することはできますが、メソッドやプロパティを注入する方法がわからないので、どこでも使用できるようになります。

Answer 1

コンポーネントは、vuejsでカプセル化されたスコープを作成します。

AFAIKこれは、私がこれを行うための完璧な方法である回避策に似ていると感じるので、これを行うべきではありません。

<my-custom-loader>コンポーネントで参照を設定できます。

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

部品が#app上に取り付けられたルートVUEインスタンスの子のように見えるので、あなたは$、参考文献をアセスするために使用することができ

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

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

その後することができますセットアップ私のカスタム・ローダーがあり、このloaderコンポーネントのインスタンスはVue.prototypeにあります。これは、今、あなたは今、あなたはdocs

で述べたように心の中でREFを使用しての警告を保つ

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

を使用して、そのメソッドをアセスすることができますthis.$loader

Vue.prototype.$loader = loader; 

を使用して任意のコンポーネントで$loaderをアセスすることができます$refsは、コンポーネントがレンダリングされた後に移入され、反応しません。それは直接的な子供の操作のためのエスケープハッチとしてのみ意味されている - あなたはテンプレートまたは計算プロパティで$refsを使用しないでください。

は私のためとして、私はあなたがcustom eventsを使用するか、グローバルevent busを登録したり、アプリが非常に大きく、複雑な状態管理