元件(component)是vue.js最強大的功能之一。
元件可以擴充套件html元素，封裝可重用的**。
vue.component('元件名稱', ) 第1個引數是標籤名稱，第2個引數是乙個選項物件
全域性元件註冊後，任何vue例項都可以用
執行效果：
可以看到元件可以重複使用。
元件引數的data值必須是函式同時這個函式要求返回乙個物件
元件模板必須是單個根元素
元件模板的內容可以是模板字串
如果使用駝峰式命名元件，那麼在使用元件的時候，只能在字串模板中用駝峰的方式使用元件，但是在普通的標籤模板中，必須使用短橫線的方式使用元件
執行效果：
執行結果：
執行效果：
為什麼報錯呢？因為我們在全域性元件中使用了區域性元件，它是訪問不到的。區域性元件只能在當前註冊它的vue例項中使用。
父元件傳送的形式是以屬性的形式繫結值到子元件身上。
然後子元件用屬性props接收
執行效果：
然後就是注意命名，在props中使用駝峰形式，模板中需要使用短橫線的形式字串形式的模板中沒有這個限制。
執行效果：
最後再了解一下父元件向子元件傳值時，props屬性值的型別。
執行效果：
子元件用 $emit()觸發事件
$emit()第乙個引數為自定義的事件名稱，第二個引數為需要傳遞的資料
父元件用v-on監聽子元件的事件
執行結果：
點選按鈕：
然後再來乙個攜帶引數的案例：
執行結果：
左邊按鈕一次加5px，右邊按鈕一次加10px。
兄弟之間傳遞資料需要借助於事件中心，通過事件中心傳遞資料
提供事件中心 var hub = new vue()
傳遞資料方，通過乙個事件觸發hub.$emit(方法名，傳遞的資料)
接收資料方，通過mounted(){} 鉤子中 觸發hub.$on()方法名
銷毀事件，通過hub.$off()方法名銷毀之後無法進行傳遞資料
銷毀事件執行效果：
點選tom按鈕，jerry增加2，點選jerry按鈕，tom增加1，點選銷毀事件後，點選按鈕無反應。
元件的最大特性就是復用性，而用好插槽能大大提高元件的可復用能力。
有bug發生執行效果：有乙個警告
具有名字的插槽
使用slot中的 "name" 屬性繫結元素
標題資訊執行效果：主要內容1
主要內容2
底部資訊資訊
標題資訊1
標題資訊2
主要內容1
主要內容2
底部資訊資訊1
底部資訊資訊2
第三個資料高亮顯示了。
Vue基礎 Vue元件化開發
目標 能夠知道元件化開發思想 能夠知道元件的註冊方式 能夠說出元件間的資料互動方式 能夠說出元件插槽的用法 能夠說出vue調式工具的用法 能夠基於元件的方式實現業務功能 目錄 元件化開發思想 元件註冊 vue除錯工具用法 元件間資料互動 元件插槽 基於元件的案例 1 元件化開發思想 把不同的功能封裝...
vue 元件化開發基礎
建立元件構造器物件 註冊元件 使用元件 doctype html html lang en head meta charset utf 8 title document title script src js vue.js script head div id my cpn div body scr...
Vue元件化開發
1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...