除了前面介紹的基本語法以外，Vue.js 還支持經過組件構建複雜的功能模塊，組件能夠稱得上是 Vue.js 的靈魂，是 Vue.js 框架提供的最強大的功能之一。html
接下來，學院君就來給你們由淺入深地介紹如何在 Vue.js 中經過組件構建不一樣的功能模塊。vue
咱們在列表渲染這篇教程中實現過一個 Web 編程語言列表功能，這裏咱們經過組件功能對以前的代碼進行重構。laravel
在 vue_learning 目錄下新建一個 component 子目錄，而後新建一個 demo.html 文件存放本篇教程的代碼。web
Vue 組件的基本使用
在這個 HTML 文檔中，基於組件功能實現 Web 編程語言列表渲染功能以下：npm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 組件開發入門</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p> Web 編程語言：</p>
<languages></languages>
</div>
<script>
Vue.component('languages', {
data: function () {
return {
languages: ['PHP', 'JavaScript', 'Golang']
}
},
template: '<ul><li v-for="language in languages">{{ language }}</li></ul>'
})
var app = new Vue({
el: '#app',
});
</script>
</body>
</html>
能夠看到，在這段代碼中，咱們在初始化 Vue 實例以前經過 Vue.component 函數定義了一個名爲 languages 的組件（經過第一個參數指定組件名）：編程
Vue.component('languages', {
data: function () {
return {
languages: ['PHP', 'JavaScript', 'Golang']
}
},
template: '<ul><li v-for="language in languages">{{ language }}</li></ul>'
})
而後在第二個參數中定義這個組件的對象屬性，它的基本結構和 Vue 全局對象實例相似，只是沒有經過 el 映射對應的 HTML 視圖容器。瀏覽器
咱們經過 data 定義了這個組件的數據屬性（和 Vue 對象不一樣的是這裏的 data 屬性返回的是函數而非對象），經過 template 定義了組件模板代碼，組件模板中可使用 Vue 的全部基本語法，還能夠引用該組件的 data 數據屬性。微信
最後咱們要渲染這個組件模板，能夠在 HTML 視圖層中插入 <languages></languages>便可，插入的位置必須位於 Vue 全局對象做用的 HTML 容器內，不然不會生效。架構
在瀏覽器中預覽上述 HTML 文檔，渲染效果以下：app
注：組件定義代碼要放到 Vue 全局對象實例化以前，不然在對象容器初始化的時候沒法識別
languages元素。
若是用類比的方式來看，Vue 組件和全局 Vue 對象很類似，繼承了它的幾乎全部屬性，除了 HTML 根元素，而後在全局對象做用的容器中經過組件名引入便可實現該組件的渲染，渲染時使用的是組件對象的 template 屬性，這一般是一段 HTML 代碼，咱們能夠在 template 字符串中經過調用組件的 data、methods、computed 等屬性/方法實現動態效果。
這樣一來，若是把 Vue 組件名對應的 HTML 元素看做組件對應的根元素容器，那麼 Vue 組件其實就是和 Vue 全局對象有着一致語法的「小生態」，這樣一來就極大下降了 Vue 組件的學習成本，也方便了不一樣組件之間的組合、嵌套、架構。最終，Vue.js 框架能夠在 Vue 全局對象容器做用域內經過這樣的一個個語法結構一致、實現功能不一樣的組件（這些組件之間或並行、或嵌套）的相互協同下，構建出各類複雜的頁面功能和模塊。
接下來，咱們就來逐一介紹 Vue 組件支持的語法、組件間的通訊和嵌套，並基於這些功能特性構建複雜的功能模塊。
組件嵌套和代碼複用
咱們首先來看下組件之間的嵌套調用。
爲了提升組件代碼的複用性，咱們能夠將上面列表中的列表項單獨拆分出來構建一個粒度更細的組件 langugae：
Vue.component('language', {
template: '<li><slot></slot></li>'
})
這裏咱們使用了 <slot></slot> 表示從調用該組件的父做用域中傳遞文原本渲染，該功能稱之爲插槽，後面咱們會詳細介紹插槽的使用和語法，這裏先了解便可。
接下來，咱們定義一個調用 language 組件的父級組件 languages：
Vue.component('languages', {
data: function () {
return {
languages: ['PHP', 'JavaScript', 'Golang']
}
},
template: '<ul><language v-for="language in languages">{{ language }}</language></ul>'
})
這樣一來，咱們就實現了在 languages 父組件中嵌套調用子組件 language 進行渲染的功能，相應的代碼很簡單，惟一須要注意的是就是咱們在父組件的模板代碼中調用 language 組件時，經過 {{ language }} 將對應的文本傳遞給了子組件，這樣對應的語言字符串就會替換子組件中的 <slot></slot> 插槽渲染出來。
在瀏覽器中刷新這個 HTML 文檔，渲染效果和以前徹底同樣：
若是咱們打開開發者工具中的 Vue Devtools 擴展標籤頁，能夠看到如今的 Components 中已經包含了 languages 和 language 組件：
除了插槽以外，還能夠經過 props 在父組件和子組件之間傳遞數據，咱們將在下篇教程給你們演示 Vue 組件之間的通訊和事件處理。
本系列教程首發在Laravel學院（laravelacademy.org），你能夠點擊頁面左下角閱讀原文連接查看最新更新的教程。
本文分享自微信公衆號 - xueyuanjun（geekacademy）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。