vue組件的好處：1、組件是獨立和可復用的代碼組織單元，組件系統是vue核心特性之一，它讓開發者使用小型、獨立和通常可復用的組件構建大型應用；2、組件化開發能大幅度提高應用開發效率、測試性、復用性等；3、能讓web前端代碼實現“高內聚”和“低耦合”，使得前端開發的過程變成搭積木的過程。

本教程操作環境：windows7系統、vue3版，DELL G3電腦。

Vue的單頁面開發其實很簡單又很抽象，單頁面是指唯一的Vue示例，也就是main.js里的new Vue({})；

那么多頁面的效果是怎么實現的呢？這就依賴于組件化開發，每一個子頁面都由多個組件構成，在url改變時刷新并渲染不同的組件群，這就達到了多頁面的效果，在vue中如何實現url改變其實就是路由了。

Vue組件化

什么是組件化

當我們遇到復雜問題時，很難一次性搞定所有問題，所以這時需要把問題拆解，把小問題都解決后綜合起來就能得到這個問題的解決方案，聽起來很熟悉吧！其實在動態規劃中就是這種思想了，只不過時最優解和解決方案的區分。

組件化也是這種解決問題的思路，當一個項目中的功能邏輯特別復雜時，我們很難一次性完成所有邏輯交互，因為容易發生冗余或回調地獄，一旦某一部分出錯，很難追究到哪行代碼出現問題。同時一個人的精力是有限的，為了減輕個人的壓力，將問題分為小的功能模塊，既可以減少管理和維護該界面的成本，也可以適合團隊合作。

但其實Vue的前端開發不需要很多人，因為它是輕量級的，所以實際項目中只需要美工人員把設計好的原型發給一兩個前端開發人員就行了，至于為什么需要這么少的開發人員，很大程度上因為Vue的組件化開發讓業務邏輯更清晰。

vue組件化思想

• 組件化的思想讓我們能夠開發出一個個獨立且可復用的小組件來構造我們的應用。

• 每一個應用(功能)都可以抽象成一個組件樹。

• 盡可能的將頁面拆分成小且可復用的組件。這樣讓我們的代碼更加方便組織和管理，并且擴展性也更強。

vue組件化的好處

1、組件是獨立和可復用的代碼組織單元。組件系統是vue核心特性之一，它使開發者使用小型、獨立和通常可復用的組件構建大型應用；

2、組件化開發能大幅度提高應用開發效率、測試性、復用性等；

3、能讓 web 前端代碼實現“高內聚 低耦合”，使得前端開發的過程變成搭積木的過程。

組件的使用

原理

• 組件的使用分三步：
  • 創建組件構造器
  • 注冊組件
  • 使用組件
• 創建組件構造器：
  • 調用const mycomponent = Vue.extend({template : “})創建構造器。
  • template后的引號里寫相應的html代碼，其實這個template就是.vue文件中的template(不清楚的可以去Vue文件構成)。
  • 在:后的單引號其實是ES6的語法，眾所周知雙引號內的字符串等內容進行換行需要寫特殊字符，而在單引號間的內容，里面的代碼在使用時是不會改變代碼的格式的，例如：
    
• 注冊組件：
  • 調用Vue.component(‘自己起的組件名’,mycomponent)，第一個參數是自己起的組件名，第二個參數是你在創建組件構造器的時候的const變量。
    
• 使用組件：
  • 在上方的template里使用
    

實際開發中的使用-父子組件

• 實際開發中組件的使用非常簡單，每個組件都是一個.vue文件，直接引入并聲明組件即可以使用。

• 第一步：創建一個.vue文件，我這里在views文件夾下創建一個Home.vue文件

• 第二步：在需要用到這個組件中引入Home文件，我這個例子是在App.vue中引入了Home.vue，大家實際開發中請自行引入。
  
  

• 第三步：在App.vue中注冊該組件，這個components的屬性我在前面說過，里面的組件就是該vue文件的子組件，父子關系形成，在這里一個父親可以有多個兒子噢！！！
  

• 第四步：使用該組件，也就是將Home.vue的內容顯示在App.vue中
  

父子組件傳遞數據

• 通過props向子組件傳遞數據。
• 通過事件向父組件發送發送消息。
  

父傳子-props用法

• 在子組件中，使用props來聲明需要從父組件接收的數據。
• props和data、methods、computed同級，里面存的就是父組件傳來的數據。
• props分為兩種：
  • 第一種：對象，對象可以設置傳遞時的類型，也可以設置默認值等。
  • 第二種：字符串數組形式，數組中每個字符串就是傳遞的數據的名字。
• 第一種情況：
  
  
  
  • 通過之前的學習，大家應該能看懂這兩張圖，第一張圖片的語句是寫在.vue文件中的template中的，而這個子組件的名稱應該是patientlist，而向子組件傳遞的信息其實就是:weizhen="notfin"，在第二張圖片中可以發現，notfin是個數組，那么weizhen是什么？？看第三張圖片，我在props里定義了一個對象！這個對象的名字就是weizhen，所以這個weizhen就是父組件把向子組件傳遞的數據封裝了一個名字！
  • 這樣就實現了父組件向子組件傳遞數據的第二種方式，怎么動態監控父組件傳來的數據是否有變化并進行刷新后期會講！
• 第二種情況：
  • 用上面的前兩張圖，其實變化的就是接收的方式：
    
  • 這樣也能獲取到相應的數據，但其實我喜歡用第一種，因為規定了類型和默認值后能讓代碼更容易讀懂。

子傳父-this.$emit()自定義事件

• 子傳父使用this.$emit(‘自己起的名稱’,data)
• 這個方法有兩個參數，第一個是自己起的名字，例如上面的weizhen；第二個參數是你要傳遞的數據，這個數據可以是通過子組件中的函數處理好的數據，也可以是data中定義的數據。這樣父組件就可以獲取到子組件中返回的結果。

父組件直接獲取子組件的數據

this.$children

• 在父組件中的script模塊中的methods中，如果想要直接獲取子組件的數據可以使用this.$children。

• 如下圖，我們使用$children獲取子組件中的message字符串。
  

• this.$children的缺點：

  • 通過$children訪問子組件時，是一個數組類型，訪問其中的子組件必須通過索引值。
  • 當子組件過多，我們需要拿到其中一個時，往往不能確定它的索引值，甚至還可能會發生變化。

this.$ref

• ref是reference-引用的簡寫。
• $ref和ref經常搭配使用，使用步驟：
  • 通過ref給某一個子組件綁定一個特定的ID。
  • 通過this.$refs.ID就可以訪問到該組件了。
    
    

子組件直接獲取父組件的數據-this.$parent

• 雖然可以通過這種方式直接獲取父組件的值，但實際項目開發中不建議使用這種方法，下面說明一下為什么：
  • 首先，子組件不需要很多的數據，子組件只需要自己處理的數據即可，如果申請了過多的數據就提高了耦合度。
  • 其次，在進行不同項目的組件復用時，我們根據需求只用到了這個子組件，如果使用this.$parent方式獲取數據，那么父組件中如果沒有對應字段就報錯了呀！
  • 最后，如果子組件都能隨便方位父組件中的數據，那么我們維護起來會非常麻煩，如果后期不需要某個字段，子組件中也要對應修改，會提高維護成本和任務量，同時也是浪費時間。
• 綜上所述：真的不建議使用$parent，但是要了解。

非父子組件之間的數據傳遞

• Vue1.x：
  • 使用$dispatch向上派發事件。
  • 使用$broadcast向下廣播事件。
• Vue2.x：
  • 首先取消了Vue1.x中的兩個方法。
  • 這個版本使用了中央事件總線，也就是通過中介完成。
  • 這個中介的意思跟數據庫中一對多關系的兩個表需要一個關系表來防止結構混亂。
• 經過了一系列的發展和優化，Vuex應運而生，Vuex管理方案是目前Vue的一大核心功能，后面的文章中會單獨講Vuex。

總結

• 組件是Vue中最為重要的功能之一，在實際開發中要多多利用，如果有可重復使用的組件那就用，畢竟是要偷懶的，要是每次新打一遍對應的代碼，那太沒意思了！