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

问题描述

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

问题解答

在需要应用组件的页面

import headTop from ’../../components/header/head’

<head-top :head-title='loginWay? ’登录’:’密码登录’' goBack='true'></head-top>回答2：某个项目的app.vue文件:

<template> <p id='app'> //在这里调用你的组件 <TopContainer></TopContainer> <BHeader></BHeader> <BContent :rows='rows'></BContent> <BNavSide :options='options' v-on:change='isShowMask'></BNavSide> <p ref='mask' v-show='showMask'></p> </p></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 { name: ’app’, //在这里写用到的组件 components: { TopContainer, BHeader, BContent, BNavSide }}</script>授人以鱼不如授人以渔，根据上面的方法就可以解决你的问题了回答3：

注册全局组建就行了呀

vue-cli 按照webpack-simple模板生成一个vue项目摸索一下就知道单文件组件怎么用了

建个组件文件夹，里面分解成header,footer什么的.vue模块，然后通过import分别导入引用模块。

导入组件，注册 components