这里介绍的就是Vue的第三个特点：模块化开发。
实际上，使用了node.js，基本都会具备模块化开发的特点，而Vue代码的形式（Vue的语法），是我们要学习的重点。
本篇的案例未使用脚手架，使用传统方式开发，但是语法一致。
学习主要主要包括这几点：
- 代码模版（html脚本）
- 参数设置（调用组件的时候，需要传递进来的参数）
- 事件回调（案例：我们的组件内部有一些按钮，需要触发父级组件一些事件）
代码模版
通过components进行组件定义，使用template设置代码模版。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="res/vue.js"></script> </head> <body> <div id="app1"> <view1></view1> <view2></view2> </div> <div id="app2"> <view1></view1> <!--在这里view不显示--> <view2></view2> </div> <script> // 全局组件 Vue.component('view1', { template: '<h5>组件1</h5>' }) // 局部组件 var Child = { template: '<h4>组件2</h4>' } // 创建根实例 new Vue({ el: '#app1', components: { // <view2> 将只在父模板可用，只在app1设置局部组件 'view2': Child } }) new Vue({ el: '#app2', }) </script> </body> </html>
参数设置
自定义组件的时候，需要告诉别人，调用我们的组件，需要传递什么参数，
使用prop（Property的缩写）为代码模版设置传值参数。
参数可以指定类型，分为String、Number、Boolean、Function、Object、Array，还可以指定是否必传，设置默认值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="res/vue.js"></script> </head> <body> <div id="app"> <my-component :num="1313"></my-component> </div> <script> new Vue({ el: '#app', components:{ 'my-component': { //代码模版 template:'<div>{{num}}</div>', props:{num:{ //可以设置多种类型 type:[String,Number], // 是否必传 required: true, // 默认值 default:'empty' }} } } }) </script> </body> </html>
事件回调
举个例子：就是我们封装的组件，里面有个按钮，别人调用我们组件的时候，写了个点击事件，我们的按钮要想办法触发点击事件。
- 使用
$on(eventName)监听事件，当子页面触发父页面的事件的时候，触发1个事件（事件的触发侦听） - 使用
$emit(eventName)触发事件，子页面触发父页面的事件
需要发送事件的模版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="res/vue.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> <button-counter></button-counter> <button-counter></button-counter> </div> </div> <script> new Vue({ el: '#counter-event-example', components: { 'button-counter': { //定义一个特殊的模版，维护一个内部数据counter，每次点击，counter加1 //这个时候，如果期望外部侦听到counter的变化，可以使用事件回调，下一个Demo展示如何传递消息 template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1 } } } } }) </script> </body> </html>
事件回调
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="res/vue.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <!--increment侦听到消息，调用incrementTotal()函数--> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { //修改total的值 this.total += 1 } }, components: { 'button-counter': { //点击的时候调用incrementHandler()函数 template: '<button v-on:click="incrementHandler">{{ counter }}</button>', template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1; //对外发送事件，发送给increment侦听器 this.$emit('increment') } } } } }) </script> </body> </html>