javascript - vue的單文件組件如何拼成一個(gè)頁(yè)面?
問(wèn)題描述
比如我現(xiàn)在有一個(gè)top.vue 和bottom.vue怎樣能作為頁(yè)面的header和footer在每一個(gè)頁(yè)面中調(diào)用呢?
問(wèn)題解答
回答1:在需要應(yīng)用組件的頁(yè)面
import headTop from ’../../components/header/head’
<head-top :head-title='loginWay? ’登錄’:’密碼登錄’' goBack='true'></head-top>回答2:某個(gè)項(xiàng)目的app.vue文件:
<template> <p id='app'> //在這里調(diào)用你的組件 <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>授人以魚(yú)不如授人以漁,根據(jù)上面的方法就可以解決你的問(wèn)題了回答3:
注冊(cè)全局組建就行了呀
回答4:vue-cli 按照webpack-simple模板生成一個(gè)vue項(xiàng)目摸索一下就知道單文件組件怎么用了
回答5:建個(gè)組件文件夾,里面分解成header,footer什么的.vue模塊,然后通過(guò)import分別導(dǎo)入引用模塊。
回答6:導(dǎo)入組件,注冊(cè) components
相關(guān)文章:
1. 數(shù)組按鍵值封裝!2. docker不顯示端口映射呢?3. java - 阿里的開(kāi)發(fā)手冊(cè)中為什么禁用map來(lái)作為查詢的接受類?4. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題5. python - flask _sqlalchemy 能否用中文作為索引條件6. python3.x - git bash如何運(yùn)行.bat文件?7. 跟蹤器怎么開(kāi)啟無(wú)反應(yīng)8. 主題切換問(wèn)題,用過(guò)別人的webapp在后臺(tái)切換模板主題后手機(jī)端打開(kāi)網(wǎng)頁(yè)就是切換到的主題了9. clone - git sourceTree克隆倉(cāng)庫(kù)時(shí),都不停彈出Password Required彈窗,即時(shí)輸入正確的git賬號(hào)密碼還是彈出10. html5 - 使用echarts中的圖表 一個(gè)頁(yè)面導(dǎo)入了好幾個(gè)js圖表 實(shí)現(xiàn)echarts圖表隨著瀏覽器窗口變化而變化時(shí)出現(xiàn)了問(wèn)題
