组件与复用技术(上)

组件（Component）：组件是可以复用的Vue实例。

一、组件的分类与注册：

1. 组件的分类：
   ①局部组件：在Vue实例内部使用components选项注册局部组件，只能适用在本Vue实例的挂载点内部。
   ②全局组件：使用Vue.component()方法注册全局组件，可以使用在所有Vue实例的挂载点内部。

2. 局部组件的注册与使用：

①在js文件中注册局部组件：

		var vm=new Vue({
		       el:‘#app’,
				       data:{},
				       components:{
				          ‘my-button’:{
				             template:‘<button class=“btn”>单击按钮</button>’
						}
				}
		})

②在HTML文件中使用局部组件：

<my-button></my-button>

③组件名称：
A .若组件名称为全小写模式：mybutton，则使用时也是全小写模式 <mybutton></mybutton>。
B .若组件名称采用PascalCase【大驼峰命名】:MyButton，则使用时必须采用-修正组件名称：<my-button></my-button>。
C .若组件名称采用CamelCase【小驼峰命名】:myButton，则使用时必须采用-修正
组件名称：<my-button></my-button>。
D .若组件名称采用kebebCase【短横线间隔符】：my-button，则使用时也是用短横
线间隔符的形式：<my-button></my-button>。

3. 全局组件的注册与使用：

	Vue.component(‘my-button’,{
	      template:‘<button class=“btn”>单击命令按钮</button>’
	})

二、组件的选项
1、template选项：为组件规划DOM结构。

（1）“单个根元素”特性：template选项在规划DOM结构时必须有一个根元素。

（2）语法格式：

ES4/ES5：使用单引号引住DOM结构，配合折行转义字符 \
 例：template:‘\
	    <div>\
	       <button>单击</button>\
	       <a href=“#”>超级链接</a>\
		</div>\
	`

ES6：使用字符串模板来实现DOM结构的规划。
            例：template:`
              <div>
                <button>单击</button>
                <a href=“#”>超级链接</a>
</div>
`

2、data选项：

组件中的data选项必须是一个function，所有的数据必须使用return语句返回一个对象来实现。

例：	data:function(){
		       return {
		           message:‘xxxxxx’
				}
		}

3、methods选项：为template选项指定的DOM结构绑定事件。

4、computed、watch选项：为组件实例设置计算属性和侦听属性。

5、props选项：为组件注册由用户使用时提供的属性。

取值：（1）字符串数组 （2）对象

A .字符串数组：props:[‘linkUrl’,‘title’,‘target’,‘txt’]

注册的属性名称若采用驼峰式命名，则使用时必须转换为“短横线间隔符”方式。

  <my-link link-url=“http://www.qq.com” title=“走进腾讯” txt=“腾讯视频”></my-link>

B .对象：允许对组件的属性实现数据验证。

	props:{
	     propA:Number,            //限制propA属性必须是数值
	     propB:[Number,String],     //限制propB属性可以是数值，也可以是字符
	     propC:{
	       type:Number,           //限制propC属性必须是数值
	       default:100,            //为propC设置默认取值为100
	       required:true,           //设置PropC属性为必备属性
	       validator:function(value){  //为PropC属性设置范围验证机制
	         return value>20            //propC的取值必须大于20
			}
		},
		propD:{
		  type:Array,            //限制propD属性必须为数组
		  default:function(){      //数组类型属性的默认值必须是一个函数的返回值
		    return [‘元素1’,‘元素2’]
			}
		}
	}

例：制作一个的组件。
（1）包括bookName、author、price、count四个属性。
（2）bookName是必须书写的属性。
（3）author是一个数组，并带有默认值（作者一、作者二）
（4）price是一个数值，默认值为0，取值必须大于20。
（5）count可以是数值，也可以是字符串。