1、什么是組件
組件是vue里面最強的功能，可以擴展html，封裝重用的代碼。
2、vue組件的四種形式
一、全局組件
1、全局組件含義和使用方法
全局組件，就是所有 vue 實例中都可以使用的組件
注冊全局組件方法如下
我們可以使用 Vue.extend() 函數，也可以不用，直接使用 Vue.component()來創建一個 Vue 的構造器
二、局部組件
1、局部組件含義和使用方法
我們使用 Vue 對象的 components 屬性來實現局部組件注冊，顧名思義局部組件就是只能在當前對象中使用的組件
三、嵌套組件
1、嵌套組件的含義和使用方法
我們可以在一個組件中嵌套另一個組件，也就是在組件中定義 components 並且傳入子組件即可。
prop（靜態傳值）
prop 是父組件用來傳遞數據的一個自定義屬性。
父組件的數據需要通過 props 把數據傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"：
案例結果：
動態 Prop（動態傳值）
類似於用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：
案例結果：
四、單個組件
單個組件也就是定義一個后綴為 .vue 的文件，然后把模版、js、style 都寫在這個文件中，這就是單個組件
3、總結
1、全局組件—在所有的 vue 實例中都可以使用
2、局部組件—只能在指定的 vue 實例中使用
3、嵌套組件—一個組件中可以嵌套另一個組件
4、單個組件—通過手寫類實現一個 vue demo 並且通過編寫單個組件進行組件之間的組合
案例展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue</title> <script type="text/javascript" src="../js/vue.js"> </script> </head> <body> <hr> <div id="app1"> <h3>愛吃什么水果？實例1</h3> <ol> <todolist></todolist> </ol> </div> <div id="app2"> <h3>愛吃什么水果？ 實例2</h3> <ol> <todolist></todolist> <runoob></runoob> </ol> </div> <div> <h3>愛吃什么水果？</h3> 組件沒有在任何實例中，所以不顯示 <ol> <todolist></todolist> </ol> </div> <script type="text/javascript"> // 定義一個子組件 var child = Vue.extend({ template: '<div>這是一個嵌套組件</div>', }) // 定義一個組件構造器 var todolist = Vue.extend({ template:'<div><li v-for="(item,index) in lists" @click="showName(index)">{{item.text}}</li> <br/><child></child></div>', data() { return { lists:[ { id: 0, text: '蘋果' }, { id: 1, text: '香蕉' }, { id: 2, text: '都喜歡' } ] } }, methods:{ showName(index){ alert(this.lists[index].text) } }, components: { 'child': child } }) // 全局組件注冊 // Vue.component('todolist',todolist) // 定義一個 Vue 實例 var demo = new Vue({ el:"#app1", data:{}, components: { 'todolist': todolist } }) // 定義另一個 Vue 實例 var demo1 = new Vue({ el:'#app2', components: { 'runoob': child } }) </script> </body> </html>