Vueはすべての（またはほとんどの）コンポーネントで外部ライブラリを共有します

Question

こんにちは私はVueをFirebaseと共に使用しています。

私のApp.vueでは、私の主なエントリポイントはFirebaseライブラリを次のように初期化しています。

import Firebase from 'firebase'; 

export default { 
    data() { 
     return { 
      firebase: null 
     } 
    }, 
    created() { 
     this.firebase = Firebase.initializeApp({ 
      apiKey: "123456789", 
      projectId: "projectid-1234", 
     }); 
    } 
} 

次に、それを必要とする他のコンポーネントの支柱として渡します。私の子コンポーネントで

<template> 
    <div id="app" class="container"> 
     <create-user-form :firebase="firebase"></create-user-form> 
     <users :firebase="firebase"></users> 
    </div> 
</template> 

私はその後Firebaseを参照

import Firebase from 'firebase'; 

export default { 
    props: ['firebase'], 
    methods: { 
     createUser() { 
       this.firebase.database().ref('users').... 
      } 
     } 
    }, 
    mounted() { 
     this.firebase.database().ref('users').... 
    } 
} 

を使用して問題は、私は深い2または3レベルはFirebaseプラグインに依存する必要がコンポーネントを持っているということです。このFirebase小道具を渡し続ける必要がありますか？もっと効果的な方法があるのだろうか？

Answer 1

あなたは、インスタンスのプロパティを使用することができます。https://vuejs.org/v2/cookbook/adding-instance-properties.html

// In your main js file 
Vue.prototype.$firebase = Firebase.initializeApp({ 
    apiKey: "123456789", 
    projectId: "projectid-1234", 
}) 

new Vue({ 
    //... 
}) 

// In your child component 
//... 
this.$firebase.database().ref('users') 
//...