javascript - vue的單文件組件如何拼成一個頁面?
問題描述
比如我現在有一個top.vue 和bottom.vue怎樣能作為頁面的header和footer在每一個頁面中調用呢?
問題解答
回答1:在需要應用組件的頁面
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:
注冊全局組建就行了呀
回答4:vue-cli 按照webpack-simple模板生成一個vue項目摸索一下就知道單文件組件怎么用了
回答5:建個組件文件夾,里面分解成header,footer什么的.vue模塊,然后通過import分別導入引用模塊。
回答6:導入組件,注冊 components
相關文章:
1. javascript - 使用form進行頁面跳轉,但是很慢,如何加一個Loading?2. python 計算兩個時間相差的分鐘數,超過一天時計算不對3. angular.js - 輸入郵箱地址之后, 如何使其自動在末尾添加分號?4. javascript - 后臺管理系統左側折疊導航欄數據較多,怎么樣直接通過搜索去定位到具體某一個菜單項位置,并展開當前菜單5. docker-machine添加一個已有的docker主機問題6. docker-compose中volumes的問題7. angular.js - angularjs 注入模塊報錯 很怪異... 求解惑8. javascript - ES6規范下 repeat 函數報錯 Invalid count value9. javascript - html5的data屬性怎么指定一個function函數呢?10. html5 - 為什么使使用vue cli 腳手架,post-css 沒有自動對css3屬性自動添加瀏覽器前綴呢?
