什麼是組件？存在的意義
組件 (Component) 這個概念，在 Vue 中可以說是舉足輕重的。組件用於寫一個頁面，或者集中相同界面或功能。
可以理解成可以重複使用的 html 片段（但是功能更豐富），或者一個頁面。
注: 在此，僅描述 .vue 單文件組件
組件的結構
組件一般包含以下幾部分
- 模板聲明
- 組件聲明
- 樣式
<template>
// 你的html寫在這裡
/<template>
<style><br> // 你的組件內樣式寫在這裡<br>/<style>
模板是一種與 html 相同的寫法的片段，用於描述文檔結構。
<template>
內容
/<template>
模板必需使用 template 標籤為根，並且根只能擁有一個直接子元素（不限標籤類型），比如:
<template>
內容1
內容2
/<template>
這樣的寫法是有問題的。
模板中可以使用所有的 html 標籤，也可以引用其它的組件:
<template>
<custom-component>
/<template>
標籤上也可以如原生的 html 一樣，寫屬性，事件，樣式，類等。
<template>
內容
/<template>
組件的聲明是通過 js 實現的，需要注意的是，在 Vue 中，默認使用了 ES6 的語法，特別是其模塊的導入導出。
ES6 模塊的導入導出
將函數作為模塊導出
haha.js
function haha() {
console.log('message from haha')
}
function hehe() {
console.log('message from haha')
}
export default haha
export { hehe }這裡使用了兩種導出方式，一個默認的導出 haha，另一個具名(沒有研究過到底叫啥名，自己編的名字)的導出 hehe
在其它位置導入此模塊
hehe.js
import haha from './relativePath/to/haha.js'
import { hehe } from './relativePath/to/haha.js'
haha() // 輸出: message from haha
hehe() // 輸出: message from hehe
注意，兩種導出方式對應的導入也是不同的
Vue 的組件聲明，就使用了默認導出的方式 export default {}。
export default {
name: '組件名稱',
// 聲明此組件的屬性（由父組件調用時傳入），可以理解為函數的參數
props: {
// 屬性名稱
propName: {
// 屬性的類型，多個類型時，使用數組: [String, Number]
type: String,
default: '默認值',
// 屬性是否是必需的
required: false
}
// 更多的屬性
},
// 引用的組件集合
components: {},
// 混入列表 [1]
mixins: [],
// 過濾器，提供給組件模板使用的管道過濾器，用於對數據的簡單處理 [2]
filters: {},
// 擁有的數據，數據始終應該使用 return {} 的方式提供，以避免組件複用導致數據被共享
data() {
return {
data1: 1
}
},
// 方法集合，這些方法可以在組件內通過 this 訪問，也能在模板內直接訪問
methods: {},
// 組件的計算屬性 [3]
computed: {
// 一個示例，用於計算 data1 的平方
hehe() {
return this.data1 ** 2
}
},
// 監視數據變化的集合，當指定的數據變化時，此處的方法會被調用
watch: {
// 監視數據 data1，在此方法內，可以實現在 data1 變化時執行代碼
data1(newValue) {}
},
// 生命週期鉤子: 組件創建後調用，此時組件還沒掛載到 DOM 樹上
created() {},
// 生命週期鉤子: 組件掛載到 DOM 樹上後調用，一般在這裡面執行一些初始化代碼
mounted() {},
// 生命週期鉤子: 組件更新後調用，要注意的是，不能在這個組件內執行會更新組件的操作，否則可能會出現死循環 [4]
updated() {},
// 生命週期鉤子: 組件銷燬前調用，這裡一般執行一些回收操作，如：數據重置，移除事件綁定，取消 setTimeout 或 setInterval 等
beforeDestroy() {}
}[1] 混入為 Vue 中組件重用的一種方式，旨在多個組件中共用相同的聲明，類似面向對象中的接口或虛類
[2] 過濾器類似數據格式化函數，在使用時，類似 linux shell 中的管道用法
[3] 計算屬性用於執行自動計算，當其中使用到的數變量發生變化時，會自動重新計算其值。在使用計算屬性時，需要當作一個屬性，而不是一個函數，如: this.hehe 而不是 this.hehe()。計算屬性應該始終返回一個值
[4] 也不是絕對不可以執行更新代碼，但是必須要有條件判斷，以終止執行
這裡並沒有把全部結構都列出來，若有需要請移步官方文檔
在模板中使用數據與邏輯
<template>
- {{item}}
點擊後隱藏這個元素
/<template>
解釋一下上面的代碼吧
- v-for 這是用來搞循環的，可以遍歷 data 中的每一項 item
- :key 這是 Vue 中對循環的約束，要求循環必須設置一個唯一的 key 值。另外，這個寫法是 v-bind:key 的簡寫，表示給屬性 key 綁定變量 item。所有的屬性（組件屬性，以及 html 屬性均可使用此寫法），如：
- {{item}} 這是模板取值的表達式，此時 item 的值會被填充到 li 元素中
- v-show 控制元素的顯示/隱藏（通過設置樣式 display 實現）；另一種相似的寫法為v-if，不同之處在於，v-if 為 false 時是將元素從 DOM 樹移除，而 v-show 為 false 時是設置 display: none
- @click="onClick" 為元素綁定點擊事件 onClick，這是 v-on:click的簡寫，所有事件都能使用這樣的方式來簡寫，比如: @mouseover, @keydown，自定義事件也如此
- 在 onClick 方法中，有這麼一句 this.visible = false ，這裡的 this 表示的是當前的組件實例，可以通過 this 訪問組件的所有數據
樣式
組件內樣式 (含作用域)，僅對當前組件生效
<style><br> div {<br> color: red;<br> }<br>/<style>這個樣式將組件內的所有 div 的文字設置為 red
全局樣式，對項目內所有元素生效
這個樣式將項目內的所有 div 的文字設置為 red
也還支持導入外部樣式
預編譯的Less/Sass也是支持的
<style><br> div {<br> color: red;<br> > span {<br> color: black;<br> }<br> }<br>/<style>接下來的掃雷項目就會使用 less 編寫樣式。
組件的引用
首先，有這麼一個組件 Sample.vue
<template>
{{textContent}}
/<template>
此組件的聲明中，包含一個名叫 textContent 的屬性，通過另一個組件去引用組件 Sample.vue （引用時可以通過屬性指定 textContent 的值）
<template>
<sample-component>
/<template>
注意: 在命名組件時，一般使用 帕斯卡命名法(Pascal) ，在引入組件時，可以保留原組件名稱，也可以指定新的名稱，如：
export default {
component: {
// 保留原名稱
Sample: Sample,
// 指定新名稱
SampleComponent: Sample
}
}按 W3C 標準，組件標籤應該始終為小寫，多個詞時使用短橫線 - 分隔(同樣地，此規則也適用於屬性名稱)，如：
<template>
<sample>
<sample-component>
/<template>
全局引用
如果一個組件需要大範圍地使用，那麼像前面這樣每次都引用就是一個笨辦法了。Vue 提供了全局的組件註冊
import Vue from 'vue'
import Sample from './components/Sample.vue'
Vue.component(Sample.name, Sample)
這樣就能在項目的任意組件內使用 sample 組件了
這些代碼一般會寫在 main.js 中
本節完
閱讀更多 前端小李 的文章
