javascript - vue的單一檔案元件如何拼成一個頁面？

Question

例如我現在有一個top.vue 和bottom.vue怎麼能作為頁面的header和footer在每個頁面中呼叫呢？

Answer 1

在需要應用元件的頁面

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

<head-top :head-title="loginWay? '登录':'密码登录'" goBack="true">
</head-top>

Answer 2

某個專案的app.vue檔:

<template>
  <p id="app">
    //在这里调用你的组件
    <TopContainer></TopContainer>
    <BHeader></BHeader>
    <BContent :rows="rows"></BContent>
    <BNavSide :options="options" v-on:change="isShowMask"></BNavSide>
    <p class="wnd-mask" 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>

授人以魚不如授人以漁，根據上面的方法就可以解決你的問題了

Answer 3

註冊全域組成就行了呀

Answer 4

vue-cli 依照webpack-simple模板產生一個vue專案摸索一下就知道單一檔案元件怎麼用了

Answer 5

建個元件資料夾，裡面分解成header,footer什麼的.vue模組，再透過import分別導入引用模組。

Answer 6

導入元件，註冊 components