组件被注册的时候，随之也创建了一个作用域，在组件的内部对组件上的参数的访问无效的。怎么解决这个问题呢，也就是这个props,一个参数数组，可以理解为函数的形参，如
props['myIndex','myValue']如何使用呢，在组件使用的时候对其形参赋值,通过这样就可以在组件内部使用形参来操作了。个人理解其原理如调用函数给函数传递参数一般。
<myComponent (index,value) in items v-bind:myIndex='index' v-bind:myValue='value'></myComponent>可以对参数进行验证这里引用官方的案例 验证的type是原生的类型：Object、Function、String、Number、Array、Boolean
Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组／对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } } })data必须是一个方法，若不是，vue会报错
data:function(){ }可以在data方法里创建局部变量，但这样对引用类型无效，因为他们都指向同一个地址。也可以通过使用计算属性的方式。思想就是，创建一个原数据的副本
props:['p1'], data:function(){ {counter:p1} //在组件的实例里使用counter就ok } props:['p1'], computed:{ c1Clone=function(){ return //处理p1 } }每个Vue都实现了事件接口（Events interface),
监听：$on(eventName) 触发：$emit(eventName)Vue的事件系统分离自浏览器的EventTarget API，但$on、$emit不是addEventListener、dispatchEvent的别称
不能用$on侦听子组件抛出的事件，而必须在模板里直接用v-on绑定
在组件上的根元素上监听原生时间，可以用native修饰
<my-component v-on:click.native='doSomething'></my-component>1、非父子组件 使用一个空vue作为中央事件的总线
var bus = new Vue(); bus.$emit('id-selected',1)//触发a中的事件 bus.on('id-selected',function(){})// 在组件 B 创建的钩子中监听事件什么是父子组件呢？说简单一点就是组件嵌套
Vue.component('child',{ //..... } Vue.component('parent',{ template:'...<child></child>....' //.... } //这里child嵌套在parent中，parent就为父组件，child为子组件首先搞清楚几个概念： 什么是分发？Vue给出的官方解释为：为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板,这个过程被称为 内容分发。直白点说，就是组合【父子】组件的一种方式。 为什么需要分发？单个组件的功能是有限的，所以需要将这些组件进行整合。在组件进行组合的过程中会涉及比如内容重叠，需要通信的情况。并且组件都有自己的作用域，他们都要在自己的作用域内编译。怎样解决这些问题？ 编译作用域：上面提到编译作用域，也就是父组件在父组件作用域内编译，子组件在子组件作用域内编译。也就是注册组件时候，花括号的作用域。如下 如果要将属性绑定到组件的根节点，那就应该在组件自己的模板上操作。
Vue.component('child-component', { // 有效，因为是在正确的作用域内 template: '<div v-show="someChildProperty">Child</div>', data: function () { return { someChildProperty: true } } })分发内容是在父作用域内编译 怎样分发？ 首先来看官方的教程：
打个比方，生活中有种父子关系是通过收养或者家庭重组得来的。继父通过正常的法律途经（模板）将继子变成合法的儿子。继父有他自己的财物，继子有他自己的财物。在进行家庭物质重组的时候，继父说：“我有一些房和车要给你。”继子可以说:“我不要”（没有slot接口），或者“给我吧）（有slot接口）。这样再把这个家庭组合起来。 其实就是一个合并的过程
具名的slot
作用域插槽 带有scope特殊属性的template元素，表示它是一个作用域插槽的模板。scope=’临时变量名’,这个变量是一个对象。
父组件模板 <div> <template scope='props'> <p>{{props.text}}</p> </template> </div> 子组件模板 <div> <slot text="插槽"></slot> </div>同样，作用域插槽也可以是具名的
通过保留的<component>元素，绑定到它的is属性上，我们可以通过两种方式来绑定
使用：
<component v-bind:is='currentCom'></component>//currentCom为vue实例中的数据属性 new Vue({ //... data:{ currentCom:'com1'//这里是本作用的属性名 }, components:{ com1:{...}, com2:{...}, com3:{...} } }); 或者： var com={...} new Vue({ data:{ currentCom:com//这里是对象不加‘’ } });将切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。我们可以给它添加一个keep-alive指令参数
<keep-alive> <component :is="currentView"> <!-- 非活动组件将被缓存！ --> </component> </keep-alive>Vue组件的API来自三个，props/evnets/slots
Props : 允许外部环境传递数据给组件 Events : 允许组件触发外部环境的副作用 Slots : 允许外部环境将额外的内容组合在组件中。在Vue中如何直接访问到子组件呢，Vue提供了ref用来为子组件添加索引，Vue的实例中有一个$refs属性，它是一个数组或是对象，包含了添加了ref的所有子组件。
<my-componnent ref='profile'></my-component> var vm = new Vue({}); var com= vm.$refs.profile;//这样就可以访问到子组件了注：$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs
对低开销的静态组件使用v-onece，渲染一次，然后缓存
template:'<div v-onece>...</div>