#### vue元件 > 元件（Component）是 Vue.js 最強大的功能之一。 > > 元件可以擴充套件 HTML 元素，封裝可重用的程式碼。 > > 元件系統讓我們可以用獨立可複用的小元件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為一個元件樹：  `目標` ```go /* 知道元件化開發思想 知道元件的註冊方式 說出元件間的資料互動方式 說出元件插槽的用法 說出Vue除錯工具的用法 基於元件的方式實現業務功能 */ ``` ##### 元件化開發思想 ```go /* 標準 分治 重用 組合 元件化規範: Web Components 希望儘可能多的重用程式碼 自定義元件的方式不太容易(html,css和js) 多次使用元件可能衝突 Web Components通過建立封裝好功能的定製元素解決上述問題. */ ``` ##### 全域性元件 `語法` ```vue // 定義元件 Vue.component(元件名稱, { data: 元件資料 template: 元件模板內容 }) // 元件用法 ``` `Example1` ```vue 點選 ``` `所有例項都能使用全域性元件` ```vue ``` ##### 區域性元件 `我們可以在實力選項中註冊區域性元件,這樣元件只能在這個例項中使用` `定義區域性元件` ```go /* var ComponentA = { ... } var ComponentB = { ... } var ComponentC = { ... } new Vue({ el: '#app' components { 'component-a': ComponentA, 'component-b': ComponentB, 'component-c': ComponentC, } }) */ ``` `Example1` ```vue ``` `Example2` ```vue ``` ##### 元件注意事項 ```go /* 1. data必須是一個函式 分析函式與普通物件的對比 2. 元件模板內容必須是單個跟元素 分析演示實際的效果 3. 元件模板內容可以是模板字串 模板字串需要瀏覽器提供支援(ES6語法) */ ``` ##### 元件命名方式 ```go /* 短橫線方式 Vue.component('my-component',{ ... }) 駝峰方式 Vue.component('MyComponent',( ... )) */ ``` `Example1` ```vue 點選 ``` ##### 元件編寫方式與Vue例項的區別 ```go /* 1. 自定義元件需要有一個root element 2. 父子元件的data是無法共享的 3. 元件可以有data,methods,computed.., 但是data必須是一個函式 */ ``` #### Vue除錯(Devtools)工具用法 `地址` https://github.com/vuejs/vue-devtools ```go /* */ ``` ##### 安裝 `下載包並打包` ```go git clone https://github.com/vuejs/vue-devtools.git cd vue-devtools yarn install && yarn build ``` `谷歌瀏覽器開啟開發者模式,載入打包後的shell-chrome目錄` #### 元件間資料互動 ##### 父元件向子元件傳值 `1. 元件內部通過props接受傳遞過來的值` ```vue Vue.component('menu-item',{ props: ['title'], template: '{{ title }}div>' }) ``` `2. 父元件通過屬性將值傳遞給子元件` ```vue ``` `Example1` ```vue {{pmsg}} ``` ##### 子元件向父元件傳值 ```go /* 1. 子元件通過自定義事件向父元件傳遞資訊 擴大字型 2. 父元件監聽子元件的事件 */ ``` `Example1` ```vue {{pmsg}} ``` ##### 非父子元件間傳值 ```go /* 1. 單獨的事件中心管理元件間通訊 var eventHub = new Vue() 2. 監聽事件與銷燬事件 eventHub.$on('add-todo',addTodo) eventHub.$off('add-todo') 3. 觸發時間 eventHub.$emit('add-todo',id) */ ```  `Example1` ```vue 父元件 銷燬事件 ``` ##### props屬性名規則 ```go /* 在props中使用駝峰形式,模板中需要使用短橫線的形式. 字串形式的模板中沒有這個模板 Vue.component('menu-item',{ // 在JavaScript中是駝峰式的 props: ['menuTitle'], template: '{{ menuTitle }}' }) */ ``` `Example1` ```vue {{pmsg}} ``` ##### props屬性值型別 ```go /* 字串 String 數值 Number 布林值 Boolean 陣列 Array 物件 Object */ ``` `Example1` ```vue {{pmsg}} ``` #### 插槽 ##### 元件插槽 ```go /* 父元件向子元件傳遞內容 */ ```  `插槽位置` ```vue Vue.component('alert-box',{ template: ` Error! ` }) ``` `插槽內容` ```vue Something=happen ``` `Example1` ```vue 有bug發生 有一個警告 ``` ##### 具名插槽 `1. 插槽定義` ```vue

``` `2.插槽內容` ```vue

標題內容

主要內容1

主要內容2

底部內容

``` `Example` ```vue

標題資訊

主要內容1

主要內容2

底部資訊資訊

主要內容1

主要內容2

``` ##### 作用域插槽 ```go /* 應用場景: 父元件對子元件的內容進行加工處理 */ ``` `Example` ```vue

• {{ item.name }}

``` `Example2` ```vue ``` #### 購物車案例 ##### 需求分析 ```go /* 根據業務功能進行元件化劃分 1. 標題元件(展示文字) 2. 列表元件(列表展示,商品數量變更,商品刪除) 3. 結算元件(計算商品總額) */ ``` ##### 功能實現步驟 ```go /* 實現整體佈局和樣式效果 劃分獨立的功能元件 組合所有的子元件形成整體結構 逐個實現各個元件功能 標題元件 列表元件 結算元件 */ ``` `Example` ```vue ``` ##### fetch請求元件 `fetch` > XMLHttpRequest是一個設計粗糙的API, 配置和呼叫方式非常混亂,而且基於事件的非同步模型寫起來不友好,相容性不好. ```vue 獲取影片資訊

• {{ data.name }}

  

``` ##### axios請求元件 ```vue 正在熱映

• {{ data.name }}