Vue.js Component、Element UI

Chingya

Published in

✨ 黑洞創造 BlackHole Creative ✨

9 min readApr 25, 2022

🚀 簡單開啟 Vue 的學習旅途 Part 02

在前一篇提到了 Vue.js 將呈現出來的網頁，拆分成不同的元件組合而成，而在 Vue cli 所建立的專案裡面，也能看到用來存放元件的 components 資料夾。接下來，我們來了解元件的架構、使用與資料的傳遞。

Vue 的基本要素 — 元件 Component

一般來說，我們在寫網頁的時候，是以 HTML 為基礎，將內容都放在單一的 HTML 檔案裡面，若是程式碼很多的時候，則拆分出 css 和 js 的檔案引入，但這樣的寫法在專案架構很大的時候，製作和修改上都不易操作。Vue.js 運用元件化的方式，將不同的區塊拆分建立成一個元件，將每個區塊的HTML、css、js 封裝成一個檔案，除了可以重複使用外，後續維護的時候也會比較輕鬆。

以上圖為例，我們就可以將程式碼寫成這樣：

<!-- App.vue檔案裡 -->
<div id="app">
    <header-component/>
    <main-component/>
    <footer-component/>
</div>

<!-- main-component.vue檔案裡 重複使用item元件 -->
<div id="main">
    <item-component/>
    <item-component/>
    <item-component/>
</div>

如何建立元件？

由於上一篇我們是直接使用 Vue CLI 快速建立專案，而當我們需要自己建立單一元件的時候，只要把握一些原則，也能夠快速地建立自己定義的元件。首先，在建立元件之前，為了避免會跳出一些奇怪的 Error❌，我們先了解一下元件的命名方式！

命名方式

在 Vue 的 style-guide 裡面，說明為了避免跟 HTML 標籤衝突，因此在註冊元件時，須以多單詞的方式命名，並且建議用大寫駝峰式寫法（pascal-case）或連接符號（kebab-case）來為元件命名。

大寫駝峰式命名：Vue.component(‘MyComponentName’, { /* … */ })
連接符號命名：Vue.component('my-component-name', { /* ... */ })

註冊元件

講完了命名方式，在使用元件之前，我們還需要註冊元件，Vue 提供了兩個方式：全域註冊及區域註冊。

全域註冊
直接在 Vue 實體中註冊元件，在整個 Vue.js 中都可以使用這個元件，不需要另外引入。

//全域註冊
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })

var vm = new Vue({}).$mount('#app');

除此之外，元件之間也可以直接互相使用：

Vue.component('component-a-copy', {
  template: `
    <component-a></component-a>
  `
});

但全域註冊有個缺點，不管有沒有使用到這個元件，只要使用全域註冊就一定會載入，因此，使用全域註冊會將沒有使用到的元件也載入進來，當元件眾多的時候，就會拖慢載入的時間。

區域註冊
將元件設置圍在實體中的選項物件，這種方式讓元件限定在其中一個實體中才能使用，若是元件之間要相互使用，則一樣需要利用 components 引用元件（如下例 ComponentD 處）。

//區域註冊
var componentC = {
  template: `
    <div>c</div>
  `
};var componentD = {
  components: {
    "component-c": componentC
  },
  template: `
    <component-c></component-c>
  `
};

var vm2 = new Vue({
  components: {
    componentC: componentC, 
    componentD  //等於componentD:componentD
  }
}).$mount("#app2");

➡ 關於全域和區域註冊，可以用這個 Demo 來練習

而在 Vue CLI 專案裡面，我們常用的方式是引入 SFC 檔案，並且直接在components 處寫上要使用的元件。

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'export default {
  components: {
    ComponentA,
    ComponentB
  },
  // ...
}

元件的特性

先用一個簡單的範例說明元件內部的程式碼：

Vue.component('my-component', {
	template: `<div>Hello Vue!</div>`,
	data() {},    // 元件的資料
	props: {},    // 子元件用來獲取父元件的資料
	computed: {}, // 元件的運算函式
	methods: {},  // 元件的函式
});

元件資料都是獨立的

元件之間的資料都是獨立使用，若是資料之間需要相互傳遞，則需要使用 props 或 emit：

透過 props 向內部組件傳遞數據
透過 emit event 觸發事件將資料往外送

data 必須是函數

在 Vue 實體中，data 可以是物件或函數，但元件的 data 只能是函數，這是因為前面提到的元件獨立原則，避免元件之間重複使用或是影響 data 的狀況。

可以利用以下 Demo 測試：

Vue.component("button-counter", {
 data() {
  return {
   count: 0
  };
 },
 template:
  '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

Element UI 是什麼？

當我們了解 Vue 的元件基本架構後，來認識一下能快速建立介面的套件 — — Element UI！它是一套基於 Vue 的桌面端 UI 組件庫，讓設計師、開發者可以快速成型一個網站的工具，官網中說明它具備四大設計原則：

一致：與現實生活一致、與界面中一致
反饋：控制反饋、頁面反饋
效率：簡化流程、清晰明確、幫助用戶識別
可控：用戶決策、結果可控

安装 Element UI

以 Vue CLI 專案為例，使用 npm 安裝，在終端機輸入：

npm i element-ui -S

並且在 main.js 中加入（記得原本的不要刪掉）：

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

這就完成 Element UI 的引入，可以開始使用 Element UI 了！✨

使用 Element UI

接著，在元件中的 HTML 中加入組件，並且調整 css 樣式，如同使用 div 、 h1 等等的標籤語法一樣，常用的標籤如：el-container、el-row、el-col、el-table、el-form等等。

以 Container 為例，先在 <template> 加入：

<el-container>
	<el-header>Header</el-header>
	<el-container>
		<el-aside width="200px">Aside</el-aside>
		<el-main>Main</el-main>
	</el-container>
	<el-footer>Footer</el-footer>
</el-container>

在 <style> 裡面加入：

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

然後我們就可以在畫面中看到（要用 npm run serve）：

Element UI 組件分為 Basic、 Form、 Data、 Notice、 Navigation 和 Others 這些類別，官網中也都附上了範例程式碼，因為它是基於 Vue.js 來設計，所以互動組件的語法也都是符合 Vue 來使用，例如：v-on、v-model、data，可以複製到自己的專案中進行修改，就能夠輕鬆地做出多樣化的網站！

參考：

https://book.vue.tw/CH2/2-1-components.html
https://cn.vuejs.org/v2/guide/components-registration.html
https://cythilya.github.io/2017/05/11/vue-component-intro/
https://peterhpchen.github.io/VuejsQuest/basic/22_ComponentRegistration.html
https://dwatow.github.io/vueExercise/components.html
https://element.eleme.io/#/en-US
https://www.wpgdadatong.com/tw/blog/detail?BID=B3287
https://blog.csdn.net/Handsome2013/article/details/105747196