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')
//...

Vue与所有（或大多数）组件共享外部库

1 个答案: