一、什么是組件化開發(fā)

人面對復(fù)雜問題的處理方式：
任何一個人處理信息的邏輯能力都是有限的
所以，當(dāng)面對一個非常復(fù)雜的問題時，我們不太可能一次性搞定一大堆的內(nèi)容。
但是，我們?nèi)擞幸环N天生的能力，就是將問題進(jìn)行拆解。
如果將一個復(fù)雜的問題，拆分成很多個可以處理的小問題，再將其放在整體當(dāng)中，你會發(fā)現(xiàn)大的問題也會迎刃而解。
組件化也是類似的思想：
如果我們將一個頁面中所有的處理邏輯全部放在一起，處理起來就會變得非常復(fù)雜，而且不利于后續(xù)的管理以及擴展。
但如果，我們講一個頁面拆分成一個個小的功能塊，每個功能塊完成屬于自己這部分獨立的功能，那么之后整個頁面的管理和維護(hù)就變得非常容易了。

image.png

image.png

我們將一個完整的頁面分成很多個組件。
每個組件都用于實現(xiàn)頁面的一個功能塊。
而每一個組件又可以進(jìn)行細(xì)分。

二、Vue組件化思想

組件化是Vue.js中的重要思想
它提供了一種抽象，讓我們可以開發(fā)出一個個獨立可復(fù)用的小組件來構(gòu)造我們的應(yīng)用。
任何的應(yīng)用都會被抽象成一顆組件樹。

image.png

組件化思想的應(yīng)用：
有了組件化的思想，我們在之后的開發(fā)中就要充分的利用它。
盡可能的將頁面拆分成一個個小的、可復(fù)用的組件。
這樣讓我們的代碼更加方便組織和管理，并且擴展性也更強。
所以，組件是Vue開發(fā)中，非常重要的一個篇章，要認(rèn)真學(xué)習(xí)。

三、注冊組件的基本步驟

組件的使用分成三個步驟：
創(chuàng)建組件構(gòu)造器
注冊組件
使用組件。
我們來看看通過代碼如何注冊組件
查看運行結(jié)果：
和直接使用一個div看起來并沒有什么區(qū)別。
但是我們可以設(shè)想，如果很多地方都要顯示這樣的信息，我們是不是就可以直接使用<my-cpn></my-cpn>來完成呢？

image.png

image.png

image.png

四、注冊組件步驟解析

這里的步驟都代表什么含義呢？
1.Vue.extend()：
調(diào)用Vue.extend()創(chuàng)建的是一個組件構(gòu)造器。
通常在創(chuàng)建組件構(gòu)造器時，傳入template代表我們自定義組件的模板。
該模板就是在使用到組件的地方，要顯示的HTML代碼。
事實上，這種寫法在Vue2.x的文檔中幾乎已經(jīng)看不到了，它會直接使用下面我們會講到的語法糖，但是在很多資料還是會提到這種方式，而且這種方式是學(xué)習(xí)后面方式的基礎(chǔ)。
2.Vue.component()：
調(diào)用Vue.component()是將剛才的組件構(gòu)造器注冊為一個組件，并且給它起一個組件的標(biāo)簽名稱。
所以需要傳遞兩個參數(shù)：1、注冊組件的標(biāo)簽名 2、組件構(gòu)造器
3.組件必須掛載在某個Vue實例下，否則它不會生效。（見下頁）
我們來看下面我使用了三次<my-cpn></my-cpn>
而第三次其實并沒有生效：
第三步的解析

image.png

五、全局組件和局部組件

當(dāng)我們通過調(diào)用Vue.component()注冊組件時，組件的注冊是全局的
這意味著該組件可以在任意Vue示例下使用。
如果我們注冊的組件是掛載在某個實例中, 那么就是一個局部組件

image.png

image.png

六、父組件和子組件

在前面我們看到了組件樹：
組件和組件之間存在層級關(guān)系
而其中一種非常重要的關(guān)系就是父子組件的關(guān)系
我們來看通過代碼如何組成的這種層級關(guān)系：
父子組件錯誤用法：以子標(biāo)簽的形式在Vue實例中使用
因為當(dāng)子組件注冊到父組件的components時，Vue會編譯好父組件的模塊
該模板的內(nèi)容已經(jīng)決定了父組件將要渲染的HTML（相當(dāng)于父組件中已經(jīng)有了子組件中的內(nèi)容了）
<child-cpn></child-cpn>是只能在父組件中被識別的。
類似這種用法，<child-cpn></child-cpn>是會被瀏覽器忽略的。

image.png

七、注冊組件語法糖

在上面注冊組件的方式，可能會有些繁瑣。
Vue為了簡化這個過程，提供了注冊的語法糖。
主要是省去了調(diào)用Vue.extend()的步驟，而是可以直接使用一個對象來代替。
語法糖注冊全局組件和局部組件：

image.png

image.png

八、模板的分離寫法

剛才，我們通過語法糖簡化了Vue組件的注冊過程，另外還有一個地方的寫法比較麻煩，就是template模塊寫法。
如果我們能將其中的HTML分離出來寫，然后掛載到對應(yīng)的組件上，必然結(jié)構(gòu)會變得非常清晰。
Vue提供了兩種方案來定義HTML模塊內(nèi)容：
使用<script>標(biāo)簽
使用<template>標(biāo)簽

image.png

image.png

九、Vue組件數(shù)據(jù)存放

組件是一個單獨功能模塊的封裝：
這個模塊有屬于自己的HTML模板，也應(yīng)該有屬性自己的數(shù)據(jù)data。
組件中的數(shù)據(jù)是保存在哪里呢？頂層的Vue實例中嗎？
我們先來測試一下，組件中能不能直接訪問Vue實例中的data

image.png

我們發(fā)現(xiàn)不能訪問，而且即使可以訪問，如果將所有的數(shù)據(jù)都放在Vue實例中，Vue實例就會變的非常臃腫。?
結(jié)論：Vue組件應(yīng)該有自己保存數(shù)據(jù)的地方。
組件數(shù)據(jù)的存放
組件自己的數(shù)據(jù)存放在哪里呢?
組件對象也有一個data屬性(也可以有methods等屬性，下面我們有用到)
只是這個data屬性必須是一個函數(shù)
而且這個函數(shù)返回一個對象，對象內(nèi)部保存著數(shù)據(jù)

image.png

image.png

十、父子組件的通信

在上一個小節(jié)中，我們提到了子組件是不能引用父組件或者Vue實例的數(shù)據(jù)的。
但是，在開發(fā)中，往往一些數(shù)據(jù)確實需要從上層傳遞到下層：
比如在一個頁面中，我們從服務(wù)器請求到了很多的數(shù)據(jù)。
其中一部分?jǐn)?shù)據(jù)，并非是我們整個頁面的大組件來展示的，而是需要下面的子組件進(jìn)行展示。
這個時候，并不會讓子組件再次發(fā)送一個網(wǎng)絡(luò)請求，而是直接讓大組件(父組件)將數(shù)據(jù)傳遞給小組件(子組件)。
如何進(jìn)行父子組件間的通信呢？Vue官方提到
通過props向子組件傳遞數(shù)據(jù)
通過事件向父組件發(fā)送消息

image.png

在下面的代碼中，我直接將Vue實例當(dāng)做父組件，并且其中包含子組件來簡化代碼。
真實的開發(fā)中，Vue實例和子組件的通信和父組件和子組件的通信過程是一樣的。
props基本用法
在組件中，使用選項props來聲明需要從父級接收到的數(shù)據(jù)。
props的值有兩種方式：
方式一：字符串?dāng)?shù)組，數(shù)組中的字符串就是傳遞時的名稱。
方式二：對象，對象可以設(shè)置傳遞時的類型，也可以設(shè)置默認(rèn)值等。
我們先來看一個最簡單的props傳遞：

image.png

Date
Function
Symbol
當(dāng)我們有自定義構(gòu)造函數(shù)時，驗證也支持自定義的類型

image.png

image.png

image.png