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实战项目基本完成了，感谢你们的阅读！

 

若是文章中存在错误的地方，麻烦请你们在评论中指正，以避免误人子弟，谢谢！