自我学习汇总：vue篇（进阶篇01）（组件的简单接触）

Vue的组件（Component）

1.将功能以组件的形式划分出来。
2.可以根据不同的业务功能，将页面划分成多个不同的组件，然后由多个不同的组件完成整个页面的布局。

全局组件（不建议使用）

全局组件注册

	1.参数1：组件名称 ，参数2：组件配置对象 template ：用来书写组件的html代码（在template中必须存在一个容器，且只能有一个容器）
	例：Vue.component('参数1',{template:'<div><h1>组件注册测试</h1></div>'});

全局组件使用：
1.在指定页面使用"<组件名称></组件名称>“的方式即可调用组件
注意事项：
1.使用组件时，需要在vue的作用范围内使用。
2.如果组件名称使用驼峰命名法进行命名"userLogin”，在调用时使用"user-login"的方式。
3.不建议使用全局组件，会增加JavaScript的量级，建议使用局部组件。

局部组件（建议使用）

1.通过将组件注册给对应的vue实例中的components属性来完成的组件注册，这种方式不会对vue实例造成影响。

局部组件的注册：

1.注册局部组件时：使用vue实例中的components属性进行注册。

例：

第二种局部组件注册方式：

	1.使用template标签封装模板，并指定id，然后通过vue中的components属性指定到template标签的id即可

例：

prop的使用（传递静态数据）

1.什么是props？
	1）.props用来给组件传递数据（静态或动态数据）。
	2）.通过props属性的数组声明key，并通过表达式取值。

例：props传递静态数据示例：

props传递动态数据

1.使用组件时，通过 "v-bind:属性名"（或简写为 :属性名） 的方式完成数据的动态绑定。

例：

props的单向数据流

1.父级props更新会影响到子组件，子组件不会影响父组件。
2.组件内部的数据：通过data(){return {name : 'value'} ;}，通过data函数，给组件定义自己的数据。

例：