==== Vue组件使用细节点 ====

1、当要使用一个组件但是不能直接使用的时候（比如定义了一个组件row，它的内容是"<tr><td>this</td></tr>"，要在一个table标签里使用它，直接写row标签的话会导致tr和table在同一级），可以使用is属性使该标签的内容为组件的内容（如在table内<tr is="row"></tr>，就可以实现table内的每个tr都是自定义组件row的内容），符合h5的编码规范

2、在根组件（Vue实例）里定义data的时候，使用对象的形式没问题；但是在子组件里定义data的时候，data必须是函数，并且要返回一个对象，对象里包含定义的数据：目的是让每个row的数据都独立存储

data : function ( )  {  return { }   }

3、需要进行DOM操作的时候，可以使用ref定义引用来获取到相应的DOM元素：

先给标签定义ref属性进行引用，给标签起个名字（如给div标签起名hell：<div ref="hell">hello world</div>），然后可以通过‘this.$refs.引用名’在函数里获取这个DOM元素标签【this.$refs是当前DOM里所有的引用（父组件里也可以获取到子组件里的引用），如‘this.$refs.hell’可以获取到引用名为‘hell’的DOM元素】，然后就可以进行DOM操作。

==== 组件间的数据传递 ====

---- 父组件向子组件传值 （属性） ----

通过属性的形式 v-bind：

（1）在子组件的标签里设置属性【如 v-bind : count="0" 】。给属性前面加上冒号，参数‘0’会变成数字格式（变为一个js表达式）；不加冒号的话参数‘0’会是字符串形式。

（2）在子组件里通过props接收数据，如props:['count']，然后就可以使用数据了【这是单向数据流，子组件只能使用父组件传过来的这个数据，而不能去直接修改这个数据】

（3）解决单向数据流子组件不能直接修改传过来的数据的问题：

在子组件里的data中定义一个变量，把接收到的数据复制到这个变量中，变为私有的，然后在子组件的模板里使用定义的这个变量。

---- 子组件向父组件传值 ----

通过this.$emit ( ) 向上传递 ：

在子组件触发的函数里使用this.$emit传递参数，如this.$emit('change',2)，第一个参数是要触发的事件（该事件名是自定义的），后面的参数是要传递的数据，然后在子组件的标签里绑定要触发的事件，并给事件设置要执行的函数（要执行的函数定义在父组件里）。如@change="handle"。

==== 组件参数校验 ====

父组件向子组件传递的数据，子组件有权对这些数据进行约束。

要进行约束的话，props就要是一个对象而不是数组，对象的键就是接收的参数的名字，对象的值是接收的参数需要满足的条件。

---- 更复杂的校验 ----

type表示数据要满足的类型

required表示父组件是否必须向子组件传这个值（true/falsle）

default是父组件没有向子组件传这个值的时候，默认显示的内容。

validator是自定义校验器（名称是固定的，内容为自定义），value是传入的数据内容，不满足里面定义的内容就会报错。

---- props特性与非props特性 ----

==== 组件绑定原生事件 ====

在组件标签上绑定的事件是自定义事件，在组件模板里绑定的事件才是原生的事件。（自定义事件可以通过在子组件中通过this.$emit去触发，但是这样太麻烦）

给组件标签上的事件添加‘.native’修饰符（如图），就可以使事件变为原生事件而不再是自定义事件。