## 一、概述 組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。幾乎任意類型的應用界面都可以抽象為一個組件樹。組件是可復用的 Vue 實例 Vue 組件非常類似于**自定義元素**——它是[Web 組件規范](https://www.w3.org/wiki/WebComponents/)的一部分； 在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。 組件(Component)是Vue.js最強大的功能之一 ● 組件可以擴展HTML元素，封裝可重用代碼； ● 在較高層面上，組件是自定義元素，Vue.js的編譯器為他添加特殊功能； ● 有些情況下，組件也可以表現用 is?特性進行了擴展的原生的HTML元素； ● 所有的Vue組件同時也都是Vue實例，所以可以接受相同的選項對象（除了一些根級特有的選項），并提供相同的生命周期鉤子； ## 二、vue組件的功能 1）能夠把頁面抽象成多個相對獨立的模塊 2）實現代碼重用，提高開發效率和代碼質量，使得代碼易于維護 ## 三、Vue組件封裝過程 ### 1，使用Vue.extend()定義一個組件； 調用Vue.extend()，創建名為myCom的組件； ``` var myCom = Vue.extend({ template: '<div>這是我的組件</div>' }) ``` `<template> `標簽創建，需要加上id屬性； ``` <template id="myCom"> <div>這是template標簽構建的組件</div> </template> ``` `<script type='text/x-template' id='myCom'> `創建； ``` <script type="text/x-template" id="myCom1"> <div>這是script標簽構建的組件</div> </script> ``` ### 2，使用Vue.component()方法注冊組件，有2中方法，全局注冊，局部注冊； 全局注冊：一次注冊( 調用Vue.component( 組件名稱，為組件創建時定義的變量 ) )，可在多個Vue實例中使用。 ``` Vue.component('my-com',myCom) ``` 全局注冊語法糖：不需要創建直接注冊的寫法 ``` Vue.component('my-com',{ 'template':'<div>這是我的組件</div>' }) ``` 局部注冊：只能在注冊該組件的實例中使用，一處注冊，一處使用； ``` var app = new Vue({ el: '#app', components: { 'my-com': myCom } }) ``` 局部注冊語法糖： ``` var app = new Vue({ el: '#app', components: { 'my-com': { template: '<div>這是我的組件</div>' } } }) ``` ### 3，如果子組件需要數據，可以在props中接受定義； ### 4，子組件修改好數據之后，想把數據傳遞給父組件，可以使用emit()方法； 在 Vue 中注冊組件很簡單： ``` // 定義名為 mycomponent 的新組件 Vue.component('mycomponent , { ... }) var app = new Vue(...) ``` 注冊完之后，就可以使用了： ## 四、使用 只需要在調用組件的地方，寫上組件名字的標簽即可； ``` <div> /*調用組件*/ <my-com></my-com> </div> ``` ## 五、實例 注冊組件： ``` Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } }) ``` ``` <div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> ```