组件的使用（上）

一、组件的构造

首先第一步是组件的创建，然后是注册，最后是使用。

1.组件构造器的创建，必须的是其内的HTML模板（template），放在父组件中才能进行渲染：

1-组件的注册

（1）在组件注册的时候使用的是camel-case，但是在html模板中是不区分大小写的，所以这里要使用kebab-case。

（2）Vue.extend()可创建一个组件构造器，其内的template属性用来定义要渲染的HTML，可以直接使用：@实现数据和函数的绑定，这点与字符串模板不同，如果是后者的话，绑定不起作用。这里写的比较简单，常见的是data和methods，与定义一个Vue实例一样，但data必须是函数。

（3）Vue.component(tagName,creater)完成组件的注册，需要两个参数，第一个表示这个组件的标签名，直接在html中当标签使用，第二个表示构造器本身。要注意的是如果要使用组件那么在根元素进行渲染前必须注册完成，也就是说Vue.component必须写在el之前。

（4）组件必须有个Vue实例的挂载点，而且也只能应用在Vue实例中。

2.组件的全局注册和局部注册，顾名思义全局就是指全局范围下的Vue实例都可以拿来用，局部则有使用限制，全局注册就没什么好说的了，这里说局部如何注册：

2-组件局部注册1

（1）这里并没有使用Vue.extend()，Vue.extend在我的理解里就相当于是喊了一句口号“要开始创建组件了！”然后列出需要的key-value，即便不喊这句口号，只要列出属性值没毛病就可以正常使用，所以extend()在创建组件时并不是必须的，后面也出现了Vue.component()语法糖直接略过了Vue.extend()。

（2）这里是与1-（2）做个对应，需注意的是这里直接绑定的值若没有经过props流传递，那么就只能使用子组件本身定义的data，根元素（这里也是父元素）的Vue实例下定义的data是接触不到的。

（3）components属性是用来实现局部注册的，“tagName”:creater。这里的局部注册是注册在Vue实例下的，其他的Vue实例不能使用，同理，我们可以把一个组件（子）注册在另一个组件（父）下，这样子组件的使用范围就只能在父组件中，但是父组件使用范围无限制，这样就更加灵活。

3.父组件与子组件：

3-组件的局部注册2

（1）这是刚才说过的Vue.component()语法糖，之前是用一个变量名声明Vue.extend()创建的组件，在component(tagName,creater)中直接将变量名带入第二个参数，现在跳过用变量声明这一步骤，直接写在creater内。

（2）把子组件的标签名直接写在父组件的template内（且只能这样写，如果是在HTML中写入的话会报错），这里的闭合/不写也照样可以运行。

（3）将子组件写在父组件中也是局部注册的一种，所以要用components属性列出我们需要的子组件，这里没有使用语法糖，可以跳过声明直接写子组件的template。这一步相当于外部的component()完成注册。

4.组件的HTML模板分离，当template内的HTML字段非常多的时候放在组件注册里就显得很麻烦，而且把HTML字段分离出去可以降低HTML和JS的耦合：

4-组件模板的解耦

（1）使用template标签，id是必须的，然后在实例下使用components属性完成注册即可。

（2）使用script标签，除了id外type也是必须的，其他无异。这两者都不可以动态改变已渲染的html。

5.子组件与父组件的数据传递-props，子组件无法直接使用父组件的数据，如果要使用的话必须通过props传递：

5-props

（1）-（2）props工作流程大致是，父组件在局部注册子组件时，给需要传入的数据定义属性名，然后在模板中利用v-bind绑定，注意是在HTML字段内实现绑定而不是在模板定义的HTML字段内，如果把1绑定数据的部分写在template定义的那一行将无法绘制props，原因在于props传递数据是从父组件传到子组件，而不是传到子组件的template模板上。

（3）子组件的“myName”和“myAge”属性已经绑定了父组件的data值，相当于子组件自己的“data”中有了这两个键值对，所以在模板中直接写入两个属性名就可以完成数据的绘制。

（ps1）父组件的data发生改变，子组件绑定的属性值会发生相应的改变，反之不成立，也就是所谓的单向绑定。

（ps2）props还可以实现数据类型的判定，要求父组件传递的数据必须是某种类型。

6.如何降低父组件和子组件的耦合-$emit，使用组件的目的就是希望它是一个可复用的、独立的、受尽可能小的干扰的模块，所以降低父组件和子组件的耦合十分有必要：

6-降低耦合

（1）&（3）在子组件模板上的v-on是指监听，要和$emit配套使用，在模板内写入发生点击事件时子组件自身的add函数被调用，$emit()表示触发某函数，如果把3去掉，那么模板外的v-on监听不到add函数的触发。所以这里子组件一旦被点击，其上的监听器监听到触发再去调动父组件的函数。

（2）如果不写成函数返回一个counter对象，那么所有的子组件实例都将公用一个counter。在这个例子中，子组件就与父组件解耦，数据上无直接联系，只靠函数的触发来实现计数。