主要內(nèi)容Vue組件自定義事件、插槽、動(dòng)態(tài)組件和異步組件、邊界處理情況、組件生命周期、過渡&動(dòng)畫、組件復(fù)用性、自定義指令、過濾器、渲染函數(shù)&JSX、Vue漸進(jìn)式和Element UI組件庫(kù)。

第一節(jié) Vue組件基礎(chǔ) Vue組件自定義事件 不同于組件和 prop，事件名不存在任何自動(dòng)化的大小寫轉(zhuǎn)換。而是觸發(fā)的事件名需要完全匹配監(jiān)聽這個(gè)事件所用的名稱。舉個(gè)例子，如果觸發(fā)一個(gè) camelCase 名字的事件 this.$emit('myEvent') 不同于組件和 prop，事件名不會(huì)被用作一個(gè) JavaScript 變量名或?qū)傩悦跃蜎]有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件監(jiān)聽器在 DOM 模板中會(huì)被自動(dòng)轉(zhuǎn)換為全小寫 (因?yàn)?HTML 是大小寫不敏感的)，所以 v-on:myEvent 將會(huì)變成 v-on:myevent——導(dǎo)致 myEvent 不可能被監(jiān)聽到。 因此，我們推薦你始終使用 kebab-case 的事件名 .sync 修飾符 在有些情況下，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒有明顯的改動(dòng)來(lái)源。 這也是為什么我們推薦以 update:myPropName 的模式觸發(fā)事件取而代之。舉個(gè)例子，在一個(gè)包含 title prop 的假設(shè)的組件中，我們可以用以下方法表達(dá)對(duì)其賦新值的意圖： this.$emit('update:title', newTitle) 然后父組件可以監(jiān)聽那個(gè)事件并根據(jù)需要更新一個(gè)本地的數(shù)據(jù)屬性。例如：為了方便起見，我們?yōu)檫@種模式提供一個(gè)縮寫，即 .sync 修飾符：插槽 插槽內(nèi)容 Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將元素作為承載分發(fā)內(nèi)容的出口。 它允許你像這樣合成組件：?Your Profile然后你在的模板中可能會(huì)寫為： ?當(dāng)組件渲染的時(shí)候，將會(huì)被替換為“Your Profile”。插槽內(nèi)可以包含任何模板代碼，包括 HTML：? ? ?Your Profile甚至其它的組件：? ? ?Your Profile如果沒有包含一個(gè)元素，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的任何內(nèi)容都會(huì)被拋棄。 編譯作用域 當(dāng)你想在一個(gè)插槽中使用數(shù)據(jù)時(shí)，例如：?Logged in as {{ user.name }}該插槽跟模板的其它地方一樣可以訪問相同的實(shí)例屬性 (也就是相同的“作用域”)，而不能訪問的作用域。例如 url 是訪問不到的：