今天继续学组件
先回顾一下昨天学的组件内容 组件和vue实例一样需要注册，注册完后使用方式和一般的元素标签类似，通过注册里面的内容对标签进行渲染，方法有template等 注册又分为全局注册component和局部注册components，局部注册可以嵌套局部注册，无限套娃
下面是一个局部注册的代码：
<body> <div id="app"> <my-qian></my-qian> </div> <script> var Child = { template:'<div>拒不注册</div>' } var app = new Vue({ el:"#app", components:{ "my-qian":Child }, }) </script> </body>看了一下，全局注册和局部注册的切就在于component(s)一个是写在vue实例外的，一个是写在vue实例里面的，写在实例里面，应该只有这个实例能够使用该组件。
Vue组件的模板在默写情况下会受到html的限制，比如<table>内规定只允许是<tr>、<td>、<th>这些表格元素，所以在table内直接使用组件是无效的，这种情况下需要用特殊的属性来挂载组件 如下：
<body> <div id="app"> <table> <tbody is="my-component"></tbody> </table> </div> <script> Vue.component('my-component',{ template:'<div>内容</div>' }); var app = new Vue({ el:'#app' }) </script> </body>他这里就不是直接使用的组件标签，而是在一个元素标签中用is挂载了组件名
除了template之前用它在注册组件的内容中添加DOM，还可以在注册组件的内容中添加和vue实例一样的data，method等属性，不过组件注册里面的data要写的是函数
<body> <div id="app"> <my-qian></my-qian> </div> <script> Vue.component('my-qian',{ template:'<div>{{message}}</div>', data:function(){ return { message:'组件' } } }); var app = new Vue({ el:'#app' }) </script> </body>就通过data的return把template中的message赋值了 当组件引用外部对象的时候，属性是共享的图片同步的，这里就是message同步
<div id="app"> <my-qian></my-qian> <my-qian></my-qian> <my-qian></my-qian> </div> <script> var data = { counter:0 }; Vue.component('my-qian',{ template:'<button @click="counter++">{{counter}}</button>', data:function(){ return data; } }); var app = new Vue({ el:'#app' }) </script> </body>像上面的例子，3个标签共享了data，当你单击的时候，3个是同时 的
如果想要让他们互不影响，可以参考下面的代码的做法：
<body> <div id="app"> <my-qian></my-qian> <my-qian></my-qian> <my-qian></my-qian> </div> <script> Vue.component('my-qian',{ template:'<button @click="counter++">{{counter}}</button>', data:function(){ return { counter: 0 }; } }); var app = new Vue({ el:'#app' }) </script> </body>就把原来通过data引入的外部对象直接写在data：内容中，这样几个counter值之间就不是共享的了
使用props传递数据
基本的用法 组件不仅是要重复用内容，更要能够在组件之间进行通信。父组件中包含子组件，父组件像子组件传递数据或参数，子组件收到后会根据参数的不同来渲染不同的内容或执行操作。这个传递数据是正向的，通过props来实现。
在组件中是使用props来声明从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象
数组对象的案例如下：
<body> <div id="app"> <my-qian message = "来吃大"> </my-qian> </div> <script> Vue.component('my-qian',{ props:['message'], template:'<div>{{message}}</div>' }); var app = new Vue({ el:'#app' }) </script> </body>上面的
<div id="app"> <my-qian message = "来吃大"> </my-qian> </div>经过渲染后就会成为下面这样
<div id="app"> <div>来打啊</div> </div>像之前不使用props来声明的，他是依靠return，而像这样声明的，他是得到来自父级的message的值，return得到的是组件自身的数据 注意的是html特性不区分大小写，命名的时候推荐-来分割
<body> <div id="app"> <my-qian message-age = "来吃大"> </my-qian> </div> <script> Vue.component('my-qian',{ props:['messageAge'], template:'<div>{{messageAge}}</div>' }); var app = new Vue({ el:'#app' }) </script> </body>就是像这样的，js里面用了小驼峰命名，但在html只能选择使用-
如果是动态的父数据，就是类似用v-bind绑定的数据，也可以实时传递给子组件，使用指令v-bind来动态绑定props的值
<body> <div id="app"> <input type="text" v-model="parent" /> <my-qian :message="parent" ></my-qian> </div> <script> Vue.component('my-qian',{ props:['message'], template:'<div>{{message}}</div>' }); var app = new Vue({ el:'#app', data:{ parent:'' } }) </script> </body>就和普通的多一个vue实例中创建parent变量，并与输入文本框中的绑定，然后自己创建的组件标签可以共享parent，还是一样的通过props传递父组件的parent的数据值
数据验证
这个验证指的是数据类型的验证，字符串、数字等不同类别
Vue.component('my-qian',{ props:{ propA:Number, //必须是数字 propB:[String,Number], //必须是字符串或者数字 propC:{ type:Boolean, //布尔值，默认为真 required:true }, propD:{ type:Number, //必须数字而且必填 required:true }, propE:{ type:Array, //如果是数组或者对象，默认值必须是一个函数来返回 default:function(){ return []; } }, propF:{ //自定义一个验证函数 validator:function(value){ return value > 10; } } } });type的可选类型有如下： String Number Boolean Object Array Function
组件通信
组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。
自定义事件 当子组件需要想父组件传递数据的时候，需要用到自定义事件
父组件可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，
