关于vue组件

组件的出现是为了实现以下两个目标：

1.降低整体复杂度，提升代码的可读性和可维护性；
2.提升局部代码的可复用性；

绝大部分情况下，一个组件就是页面中某个区域，组件包含该区域的：
1.功能（JS代码）
2.内容（模板代码）
3.样式（CSS代码）//要在组件中包含样式，需要构建工具的支撑

组件开发：

• 创建组件：
  组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可，该配置对象和vue实例的配置几乎是一样的
• 注册组件：
  注册组件分为两种方式：一种是全局注册，一种是局部注册

1.全局注册：一旦全局注册了一个组件，整个应用中任何地方都可以使用该组件。

//全局注册方式：
//参数1：组件名称，将来在模板中使用组件时，会使用该名称；
//参数2：组件配置对象
//该代码运行后，即可在模板中使用组件
Vue.component("组件名称",组件配置对象)
//组件名称使用大驼峰或短横线命名法，推荐使用大驼峰，若使用大驼峰命名法的话，在使用组件的时候既可以使用短横线又可以使用大驼峰
//例如 
Vue.component("MyButton",myButton);
//Vue.component("my-button",myButton);
//在模板中，可以使用组件了
//推荐使用大驼峰
<MyButton/>
//<MyButton></MyButton>
//<my-button/>
//<my-button></my-button>

注意：在一些工程化的大型项目中，很多组件都不需要全局使用，如登录组件，只需要在登录的相关页面中使用，如果全局注册，将导致构建工具无法优化打包，因此，除非组件特别通用，否则不建议使用全局注册

2.局部注册：哪里用到组件，就在哪里注册
局部注册方式是，在要使用组件的组件或实例中加入一个配置。

var otherCom = {
	components:{
		//属性名为组件名称，模板中将使用该名称
		//属性值为组件配置对象
		"MyButton":myButton,//方式1：推荐使用大驼峰命名法，若使用大驼峰命名法的话，在使用组件的时候既可以使用短横线又可以使用大驼峰
		//"my-button":myButton,//方式2：短横线命名法
	}
}
//使用组件方式，以下任何一种都行：
//推荐使用大驼峰
<MyButton/>
//<MyButton></MyButton>
//<my-button/>
//<my-button></my-button>