除了前面介绍的基本语法以外，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源创计划”，欢迎正在阅读的你也加入，一块儿分享。