vue+vue-router+axios+element-ui構建vue實戰項目之八（引用組件）

在上一節《vue+vue-router+axios+element-ui構建vue實戰項目之七（渲染content.vue內容）》中，我們成功渲染出了內容頁面。

不過，我們還漏掉了一個重要的東西，不知道大家還記得《vue+vue-router+axios+element-ui構建vue實戰項目之三（認識項目文件）》中的components文件夾嗎？

回顧一下，里面放的都是項目公用的組件，有header.vue和footer.vue兩個文件。

如果我們要在頁面中使用header.vue和footer.vue這兩個文件怎么辦呢？

下面，我們就來說說這個問題。

編寫header.vue和footer.vue文件

header.vue文件

<template>
  <div style="background: red">
    <h3>Vue header</h3>
  </div>
</template>

footer.vue文件

<template>
  <div style="background: blue">
    <h3>Vue footer</h3>
  </div>
</template>

好了，兩個文件的內容都已經編寫完成，接下來，就在頁面就引用它。

 

編寫App.vue文件

我們經常瀏覽網頁都知道，很多網頁的header和footer都是一樣的，我們如何才能做到編寫一個header和footer，就能在多個頁面使用呢？

不多說，直接上代碼

<template>
  <div id="app">
    <myHeader></myHeader>
    <router-view></router-view>
    <myFooter></myFooter>
  </div>
</template>
<script>
import myHeader from './components/header'
import myFooter from './components/footer'
export default {
  components: {
    myHeader, myFooter
  },
  name: 'App'
}
</script>
<style lang="scss">
  @import "./style/style";
</style>

大家看到 <myHeader></myHeader> 這個代碼的時候肯定很奇怪，這是個什么玩意兒。其實，這是一個自定義組件。我們在其他地方寫好了一個組件，然后就可以用這種方式引入進來。

同樣 <myFooter></myFooter> 也是一個組件。不再累述。

當然，組件的名字是自定義的，你想怎么取就怎么取，但是千萬要主要，不要跟原有的html標簽重名。

好，我們再說說這里面的內容。

components: { myHeader,  myFooter }

如上，我們先引入了myHeader 和 myFooter 這兩個組件的源文件，這里，我們要把引用的組件給申明到 components 里面去。這樣，我們就可以在 template 里面使用了。

 

上面的代碼完成后，保存，打開瀏覽器，我們就可以看到：

 

隨便點擊一條內容，跳轉到內容頁面：

 

這樣，我們就完成了組件的引用和復用，極大的提升了效率。

當然，我們也可以在不同的頁面引用不同的組件，按照同樣的方式即可。

大家下來自行試一下，這里就不再贅述了。

 

到本節，我們vue實戰項目基本完成了，感謝大家的閱讀！

 

如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！