vue的单文件组件如何拼成一个页面？

Question

比如我现在有一个top.vue 和bottom.vue怎样能作为页面的header和footer在每一个页面中调用呢？

Answer 1

某个项目的app.vue文件:<template>&nbsp; <div id="app">&nbsp; &nbsp; //在这里调用你的组件&nbsp; &nbsp; <TopContainer></TopContainer>&nbsp; &nbsp; <BHeader></BHeader>&nbsp; &nbsp; <BContent :rows="rows"></BContent>&nbsp; &nbsp; <BNavSide :options="options" v-on:change="isShowMask"></BNavSide>&nbsp; &nbsp; <div class="wnd-mask" ref="mask" v-show="showMask"></div>&nbsp; </div></template><script>//在这里import组件import TopContainer from 'components/common/TopContainer.vue'import BHeader from 'components/common/BHeader.vue'import BContent from 'components/content/BContent.vue'import BNavSide from 'components/nav/BNavSide'import { mapGetters } from 'vuex'export default {&nbsp; name: 'app',&nbsp; //在这里写用到的组件&nbsp; components: {&nbsp; &nbsp; TopContainer,&nbsp; &nbsp; BHeader,&nbsp; &nbsp; BContent,&nbsp; &nbsp; BNavSide&nbsp; }}</script>授人以鱼不如授人以渔，根据上面的方法就可以解决你的问题了