前端開發系列050-基礎篇之元件的概念和使用(Vue)
title: '前端開發系列050-基礎篇之元件的概念和使用(Vue)'
tags:
categories: []
date: 2017-12-09 01:00:00
本文是早期學習Vue整理的一些階段性總結，內容主要關於Vue框架中元件的概念和資料傳遞。
一、元件的相關概念
在Vue學習的時候參考了很多文件和書籍，這些文件和書籍中總是充滿各種術語(定語)，在這裡先把Vue中相關的詞彙搞清楚，先搞清楚誰是誰，什麼是什麼，它們的關係是什麼樣，然後才能繼續後面更深入的內容。涉及到的主要概念如下：
元件：我自己的理解是可以把所有的頁面中的所有組成部分都當成是元件，即可以把一切都當成是元件（比如一個簡單的button按鈕），不同的元件有不同的功能（有很多常用的UI元件庫 如iView就提供了各種豐富的元件等），元件也可大可小，大的元件程式碼較多能夠完成豐富的功能實現和展示，小的元件也許就是一個簡單的標籤而已，元件可以巢狀可以組合等等。理解了這些概念之後，就會發現其實所有的頁面都可以由多個元件構成
在元件化開發中，頁面由多個元件構成，那麼這麼多的元件它們之間自然不會毫無關係，所以在很多文件中用到了父元件、子元件等等術語。元件本身就是一個完整的功能模組，元件的內容可以是固定不變的，也可能需要和動態的資料進行繫結，所以這又涉及到元件中資料的傳遞。
現在我們明白了頁面中的一切都可以看做是元件，而且元件可大可小，元件可複雜可簡單。
HTML中的眾多標籤比如a標籤或者是button標籤等等的都可以看做是一個個的元件，他們提供對應的功能也能夠複用，但是對於複雜的頁面應用開發來說這樣的層級太小，僅僅使用單個標籤無法完整的定義更復雜的功能模組，在以前的開發中我們是把多個不同的標籤組合在一起實現一個稍微複雜的功能模組。現在很多優秀的前端框架中都採用元件化的組織方式，核心的東西並沒有改變。
我們把在框架中(Vue)中使用的元件稱為自定義元件（區別於系統為我們提供的標籤），這些自定義元件的本質其實就是把眾多標籤以一定的方式組合在一起形成一個整體被稱為"元件"。我認為元件開發方式最核心的東西還是程式碼（功能）複用，把複雜的應用切割成一個個小的更容易管理的模組。
二、Vue框架中的元件
Vue框架中的元件和大多數框架中的元件也沒有太大的差別，下面簡單說明Vue框架中元件的相關使用。
元件的使用主要有兩部分構成
① 元件的註冊（指定元件的結構和具體內容等等）
② 元件的使用（在頁面中使用）
① 全域性註冊的元件
全域性註冊的元件其實是把元件相關的資訊寫到Vue這個建構函式身上，全域性元件在任何Vue例項掛載的標籤中都能夠使用。
//第一個引數：註冊的全域性元件的名稱
//第二個引數：描述元件內容、資料等資訊的選項物件
Vue.component("my-component",{
//元件的配置項，包括元件的內容（template） 元件中的資料等...
})
② 區域性註冊的元件
區域性註冊的元件其實是把元件相關的資訊寫到當前指定的這個Vue例項物件(由全域性的Vue建構函式建立得到)身上，區域性註冊的元件只在當前的這個Vue例項物件掛載的標籤中能夠使用，有使用範圍的限制。
var app2 = new Vue({
el:"#TEST-TWO",
components:{
"my-component-two":{
//在app2例項物件中註冊的區域性元件，元件名稱為my-component-two
//元件的內容為：span標籤
},
"my-component-three":{
//在app2例項物件中註冊的區域性元件，元件名稱為my-component-three
//元件的內容為：p標籤
}
}
})
③ 元件的具體用法
說明：如果是全域性註冊的元件那麼在頁面中所有被掛載到Vue例項物件的標籤中均可以使用，區域性元件只能在註冊的Vue例項，掛載的標籤中使用，有使用範圍的限制
元件的使用方式:在頁面中指定位置以標籤對的方式表明此處需要用到的是哪個元件。示例：<my-component-global-one></my-component-global-one>
Vue框架中元件的使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../Vue/vue.min.js"></script>
</head>
<div id="demo-one">
<!--全域性註冊的元件在Vue例項物件掛載的標籤中都可以使用-->
<my-component-global-01></my-component-global-01>
<my-component-global-02></my-component-global-02>
</div>
<hr>
<div id="demo-two">
<!--全域性註冊的元件在Vue例項物件掛載的標籤中都可以使用-->
<my-component-global-01></my-component-global-01>
<my-component-global-02></my-component-global-02>
</div>
<hr>
<div id="demo-three">
<my-component-part-01></my-component-part-01>
<my-component-part-02></my-component-part-02>
</div>
<body>
<script>
//A 全域性註冊的元件
Vue.component("my-component-global-01",{
//元件的選項物件
template:"<div>我是全域性註冊的元件 元件名稱為my-component-global-01</div>"
});
Vue.component("my-component-global-02",{
//元件的選項物件
template:"<div>我是全域性註冊的元件 元件名稱為my-component-global-02</div>"
});
//B 區域性註冊的元件
//建立Vue例項化物件
var app1 = new Vue({
el:"#demo-one"
});
var app2 = new Vue({
el:"#demo-two"
});
var app3 = new Vue({
el:"#demo-three",
components:{
"my-component-part-01":{
//元件的選項物件
template:"<div>區域性註冊的元件 元件名稱為my-component-part-01</div>"
},
"my-component-part-02":{
//元件的選項物件
template:"<div>區域性註冊的元件 元件名稱為my-component-part-02</div>"
}
}
})
</script>
</body>
</html>
三、父子元件
元件和元件之間可以是包含的關係，如果某個元件中包含另外一個元件，那該元件被稱為父元件，被包含的元件相對來說則是子元件。
下面通過程式碼簡單介紹父子元件的結構，父子元件還有一個很重要的資料傳遞問題，即父子元件的通訊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../Vue/vue.min.js"></script>
</head>
<body>
<div id="demoID">
<parent></parent>
<child-three></child-three>
<!--<child-one></child-one> 因為元件是在parent父元件中註冊的，所以此處不能直接使用-->
</div>
<script>
//建立兩個子元件構造器（分別為child-one和child-two）
var childOne = Vue.extend({
template:"<input type='color'/>"
});
var childTwo = Vue.extend({
template:"<input type='date'/>"
});
//註冊父元件(作為child-one和child-two的父元件)
Vue.component("parent",{
//在父元件中註冊child-one和child-two兩個子元件，外界無法直接獲取
components:{
"child-one":childOne,
"child-two":childTwo
},
template:"<div><child-one></child-one><child-two></child-two></div>"
});
//在外部註冊元件(需要注意位置關係)
Vue.component("child-three",childTwo);
//建立Vue例項物件並掛載到頁面
var app = new Vue({
el:"#demoID"
})
</script>
</body>
</html>