将firebase引用作为prop中的prop

Question

我的顶级组件中有一个firebase引用。我怎样才能将它作为道具传递给vue中的子组件？

<template>
  <div id="app">
    <NavBar />
    <router-view db="pass the db ref here" storage="pass the storage ref here" />
  </div>
</template>

<script>
import { db, storage } from './config/firebase';
import NavBar from './components/NavBar';

export default {
  name: 'app',
  components: {
    NavBar,
  },
};
</script>

Answer 1

首先，将db和storage引用设置为根Vue实例的数据属性：

data() {
  return { db, storage };
}

然后，将它们绑定到<router-view>组件：

<router-view :db="db" :storage="storage" />

子组件需要声明这些props：

props: {
  db: Object,
  storage: Object
}