javascript - Comment combiner les composants d'un fichier unique de Vue dans une page?

Question

Par exemple, j'ai maintenant top.vue et bottom.vue. Comment peuvent-ils être appelés comme en-tête et pied de page dans chaque page ?

Answer 1

Sur les pages où des composants d'application sont requis

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

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

Answer 2

Le fichier app.vue d'un certain projet :

<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>

Il vaut mieux apprendre à un homme à pêcher que de lui apprendre à pêcher. Selon la méthode ci-dessus, vous pouvez résoudre votre problème

.

Answer 3

Inscrivez-vous simplement à l'établissement mondial et c'est tout

Answer 4

vue-cli génère un projet vue selon le modèle webpack-simple et vous saurez comment utiliser les composants d'un seul fichier après l'avoir exploré

Answer 5

Créez un dossier de composants, décomposé en modules d'en-tête, de pied de page et autres modules .vue, puis importez les modules de référence respectivement via l'importation.

Answer 6

Importer des composants et enregistrer des composants