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-