Vue自己寫組件——Demo詳細步驟

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

 

一、創建組件文件

 

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

 

二、編寫組件模板文件

 

//這里是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

 

四、在項目中引入組件

 

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 } })

 

五、使用組件

 

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

 

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