Vue本身寫組件——Demo詳細步驟

公司近期發力，同時開了四五個大項目，而且都是用Vue來作的，我很榮幸的被分到了寫項目公用模塊的組，因此須要將公用的部分提取成組件的形式，供幾個項目共同使用，下面詳細講一下寫Vue組件的具體步驟。

 

1、建立組件文件

 

 假如幾個項目共用一個頭部組件header，咱們先創建所須要的文件：header.vue 存放header的模板等內容，index.js 是編寫header組件的js文件

 

2、編寫組件模板文件

 

//這裏是header.vue文件
<template>
  <div class="header"> 我是header模板........ </div>
</template>

<script> export default{ name: '', data(){ return {} } } </script>
<style>
</style>

 

三、編寫組件文件

 

// 這裏是index.js文件
import myHeader from './header'　　// ./表示當前目錄，header表示header.vue（自動補全後綴） const Header = { install : function(Vue){ Vue.component('ele-header', myHeader) } } export default Header

 

首先導入模板文件header.vue定義爲變量myHeader準備使用，接着經過install方法註冊組件（組件必須先註冊，後使用，不然會報錯）

install方法表示 在main.js（項目的入口文件，也多是 entry.js等等）中，若是使用Vue.use()方法的話，則會默認調用 install方法

調用install方法後，會經過Vue.component()方法全局註冊該組件，註冊完成後咱們的組件就可使用了。

 

// 這裏爲基礎薄弱的同窗附上Vue.component方法的使用說明 // Vue.component(組件在HTML文件中使用時的標籤名稱, template) // 註冊模板 Vue.component('header', { 　　template: '<div class="header">hello world</div>' }) // 使用模板 <div id="container">
　　<header></header>
</div> // F12查看<header>元素的解析結果 <div class="header">hello world</div> // 頁面展現 hello world

 

4、在項目中引入組件

 

webpack首先會加載項目入口文件，這裏是main.js，而後根據各類import去尋找相應的文件依賴並將文件加載進來，因此咱們在main.js裏面引入組件

// 這裏是項目入口文件main.js
import Vue from 'vue' import App from './app.vue'

// 引入header組件 index.js是組件的默認入口
import Header from './components/header/index' // Vue.use()方法會觸發index.js中的install方法
Vue.use(Header); new Vue({ el: '#app',　　// 掛載項目 components: { App } })

 

5、使用組件

 

// 這裏是app.vue文件，項目掛載在#app元素下，因此header組件必須在該元素內部使用
<template>
  <div id="app">
    <ele-header></ele-header>
  </div>
</template>

 

至此，組件的建立、註冊、使用就完成了。