vue2组件传值(边界处理)

父传子

        

• 自定义属性 完成数据向下传递 props => 单向数据流

• 父组件
<child 属性>

  子组件
props的定义两个方案 array | object
数组方式，只是定义组件给自己所用，组件充当局部ui功能  
调用  this.属性,在模板中直接{{属性}}  
props:[属性]

  对象方式,一般定义组件给更多的人去使用，如组件库

• props:{
    属性:{
          type:Number。。。
      default:默认值
      required:true/false
    }
  } 

  子传父

• 自定义事件 子组件中抛发一个事件 this.$emit(事件名,数据),在父组件中实现对应的事件

         在子组件中通过自定义事件完成对于父组件通知  this.$emit(事件名,数据)
         父组件在子组件标签中绑定自定义事件，才能完成对应的数据通信  @事件名="方法"

     事件总线

         在项目中，组件之间的关系，可以比较的复杂

    事件总线(eventBus) => 发布 和 订阅

         先在需要接受组件中订阅对应 频道

         在对于发布的组件中在去对应的频道中发布 数据

        

const bus = new Vue()
bus.$emit(频道名,数据)
bus.$on(频道名,(...args)=>{})
bus.off(频道名)

        Ref  

• 作用于普通的html中，它返回对应的dom对象

• 作用于自定义组件中，返回对应组件的实例

• - `this.$nextTick(()=>{})`
  - 获取ref对应的值 `this.$refs.xxxx`

  parent/children/root

• this.$root 获取根组件 new Vue()

• this.$parent 获取当前组件父组件

• this.$children 获取当前组件的子组件集合

      provide/inject

         专门给封装组件库所用的通信机制

         使用此方案通信的组件，必须是一个组件下派生的

         在祖先组件中发布 provide:Object|()=>({})

         在其子孙组件是注入 inject:[名称]