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

1 <template>
2   <div style="background: red">
3     <h3>Vue header</h3>
4   </div>
5 </template>

footer.vue文件

1 <template>
2   <div style="background: blue">
3     <h3>Vue footer</h3>
4   </div>
5 </template>

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

 

編寫App.vue文件

咱們常常瀏覽網頁都知道，不少網頁的header和footer都是同樣的，咱們如何才能作到編寫一個header和footer，就能在多個頁面使用呢？

很少說，直接上代碼

 1 <template>
 2   <div id="app">
 3     <myHeader></myHeader>
 4     <router-view></router-view>
 5     <myFooter></myFooter>
 6   </div>
 7 </template>
 8 <script>
 9 import myHeader from './components/header'
10 import myFooter from './components/footer'
11 export default {
12   components: {
13     myHeader, myFooter
14   },
15   name: 'App'
16 }
17 </script>
18 <style lang="scss">
19   @import "./style/style";
20 </style>

你們看到 <myHeader></myHeader> 這個代碼的時候確定很奇怪，這是個什麼玩意兒。其實，這是一個自定義組件。咱們在其餘地方寫好了一個組件，而後就能夠用這種方式引入進來。

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

固然，組件的名字是自定義的，你想怎麼取就怎麼取，可是千萬要主要，不要跟原有的html標籤重名。

好，咱們再說說這裏面的內容。

components: { myHeader,  myFooter }

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

 

上面的代碼完成後，保存，打開瀏覽器，咱們就能夠看到：

 

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

 

這樣，咱們就完成了組件的引用和複用，極大的提高了效率。

固然，咱們也能夠在不一樣的頁面引用不一樣的組件，按照一樣的方式便可。

你們下來自行試一下，這裏就再也不贅述了。

 

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

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！