vue的组件化开发（组件通信，插槽，递归组件）

1. vue组件的通信：包括子通父，父通子，兄弟通信，祖代与后代通信，vuex全局状态管理。

    1.1 父向子通信：props属性和refs属性。

          1.1.1 props属性：

//在子组件中
props:{
   age: {
      type: Number, //父组件传递过来age变量的类型,包括String、Number、Boolean、Array、Object、Date、Function、Symbol。
      default: 0,  //默认值
      required: true,  //是否必填
      validator: function (value) {  //传递过来的值的校验。验证失败的时候，Vue 将会产生一个控制台的警告。
        return value >= 0
      }
   },
   age1:[Number,String],   //存在多种类型。
}

//在父组件中
<child :age='ageValue' :age1="age1Value"></child>

          1.1.2 refs属性：

<child :ref='childDom'></child>
//通过this.$refs.childDom.xxx 调用子组件的方法/变量。

    1.2 子向父通信：this.$emit(事件，值)。

//子组件中
this,$emit('send','这是子组件向父组件传递的数据');

//父组件中
<child @send='sendHandle'></child>
sendHandle(val){ //父组件中监听子组件的传递的过来的值，并做响应的处理

}

    1.3 兄弟通信：可以通过$parent，bus，$toot实现，原理就是：子组件A传给父组件，父组件在传递给子组件B。

//兄弟组件A
this.$parent.on('send',(res)=>{});  //监听当前实例的父组件由vm.$emit触发的自定义事件

//兄弟组件B
this.$parent.emit('send','B向A传递的数据');  //向 当前实例的父组件自定义广播事件和数据

   1.4 祖先和后代组件之间的通信：通过provide/inject（只能祖先传递给后代，不能逆向）。

//祖先组件
provide(){
    return {foo:'这是要传递给后代的值'}
}

//后代（后N代）
inject:['foo']   //获取祖先组件传递过来的foo值。

---

拓展：1. 以前实现后代给祖先通信的方式：原理就是：后代一层一层向父组件以及父组件的父组件.....传递自定义事件和值，直到找到根组件为止。

//后代组件中生成一个方法dispatch
dispatch(eventName,val){
    let parent =this.$parent;
    while(parent){
        if(parent){
            parent.$emit(eventName,val);
            parent=parent.$parent;
        }else{
            break;
        }
    }
}



//祖先组件中
this.$on(eventName,val);  //监听后代组件广播过来的自定义事件和数据

---

   1.4 任意两个组件通信：两个组件的关系包括父子，兄弟，祖先与后代等，可以通过vuex全局状态管理以及$bus实现。

        1.4.1 $bus：中小型项目中。

import vue from "vue"
vue.prototype.$bus=new Bus();

//在一个任意组件中
this.$bus.$on(eventName,(res)=>{})

//在另一个任意组件中
this.$bus.$emit(eventName,val);

        1.4.2 vuex：复杂大型项目中。

2. vue组件插槽：slot标签，包括匿名组件和具名组件。

//1. 写法：
//1.1 匿名组件
<slot></slot>
//1.2 具名组件
<slot name='box'></slot>


//2.使用
//2.1匿名组件的使用
<div></div>
//2.2 具名组件的使用
<div slot='box'></div>

3. vue递归组件：即组件自己调用自己，必须满足（有结束条件，且必须有name名，且首字母大写）。

<template>
    <div>
        <!--必须有结束递归结束条件-->
        <my-node v-if='xxx' :data='xxx'></my-node>
    </div>
</template>
<script>
    export default{
        name:"MyNode"   //有name名且推荐首字母大写
    }
</script>