vue組件（將頁面公用的頭部組件化）

 呃……重新撿起前面用vue-cli快速生成的項目。

之前是做過一個多頁面的改造，以及引入vux的ui組件，這次在這個項目的基礎上，再來聊聊vue中的component。

別問我為啥總是寫關於vue的博客，都是為了生計（………………）

這是官方的文檔地址（https://cn.vuejs.org/v2/guide/components.html#什么是組件？），關於組件寫了一大堆，一看就知道這個很有用啦。

關於一些組件的概念之類的就不一一介紹了，官方文檔說的很詳細。

下面進入正題，直接下載項目

一 拿出之前的項目

 

二 在這種需求下 ，自然就要使用我們的組件了，在index.js中添加如下代碼。

 

Vue.component('header-item', {
  props: ['message', 'backUrl'],
  template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont">&#xe697;</i></span></router-link> <div><span>{{message}}</span></div> </header>`
})
// props用來傳遞數據

//template 一個html結構的模板

需要注意的是：因為在之前項目是用了vue路由，backUrl這個參數是個可以配置的路由，在實際項目中可以按照自己的需求去配置。

三  在另外兩個demo頁面添加代碼

demo1.vue中添加如下代碼

  <header-item message="我是demo1頭部" backUrl="/"></header-item>

demo2.vue中添加如下代碼

  <header-item message="我是demo2頭部" backUrl="/"></header-item>

四 最后運行打開網頁可以看到

 

繼續甩上之前的項目的github地址   https://github.com/qianyinghuanmie/vue-cli-