Vue 组件

1、注册方式

Vue.Component(name,object);//通过Vue的一个静态函数创建

---

2、props

Vue.component('myComponent',{
    props[],
    template:''
});

组件被注册的时候，随之也创建了一个作用域，在组件的内部对组件上的参数的访问无效的。怎么解决这个问题呢，也就是这个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
      }
    }
  }
})

---

3、data

data必须是一个方法，若不是，vue会报错

data:function(){
}

可以在data方法里创建局部变量，但这样对引用类型无效，因为他们都指向同一个地址。也可以通过使用计算属性的方式。思想就是，创建一个原数据的副本

props:['p1'],
data:function(){
    {counter:p1} //在组件的实例里使用counter就ok
}

props:['p1'],
computed:{
    c1Clone=function(){
        return //处理p1
    }
}

---

3、事件

每个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>

---

4、通信

1、非父子组件
使用一个空vue作为中央事件的总线

var bus = new Vue();

bus.$emit('id-selected',1)//触发a中的事件

bus.on('id-selected',function(){})// 在组件 B 创建的钩子中监听事件

---

5、父子组件

什么是父子组件呢？说简单一点就是组件嵌套

Vue.component('child',{
    //.....
}
Vue.component('parent',{
    template:'...<child></child>....'
    //....
}
//这里child嵌套在parent中，parent就为父组件，child为子组件

6、内容分发slot

首先搞清楚几个概念：
什么是分发？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>

同样，作用域插槽也可以是具名的

7、动态组件

通过保留的<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 : 允许外部环境将额外的内容组合在组件中。

---

8、子组件索引

在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>