Vue组件通信

Vue的组件之间是需要互相通信和传递数据的,这里演示几个常用的通信方式

父与子
  props方式

  props让组件接收外部传过来的数据

   传递数据<组件标签名 name='***' :传递参数名='值'/> 这里传递参数名前加" : " 从而可以动态绑定数据

   接收数据

       第一种方式(只接收) props:['参数名1','参数名2',.......]

      第二种方式 (限制类型) props:{参数名1:参数类型,参数2:参数类型,......}

      第三种方式 (限制类型.限制必要性 指定默认值)

         props:{

                参数1:{

                   type:String(Number,Boolean,Object....) //参数类型

                   required:true, //参数必要性

                   default:'默认值'

     }

}        

注意: props是只读的,vue底层会监测对props的修改,如果进行了修改,就会发出警告 若业务需求确实需要修改那么请复制props的数据到data中,然后可以修改data中的数据

父子组件之间传递数据可以直接使用props方式进行传递,这种方式需要事先在父组件中定义好回调方法,然后在需要的时候让子组件调用就可以
父组件:

   

 

子组件:

自定义事件
还可以使用自定义事件的方式进行传参,这时不需要给子组件像props那样传参,子组件也不用接收

  适用于子组件====>父组件

   使用场景: 子组件想给父组件传数据 那么就要在父组件中给子组件绑定自定义事件(事件的回调在父组件中)

  绑定自定义事件

   a 第一种方式 在父组件中或

   b 第二种方式 在父组件中 this.$refs.demo.$on('事件名',方法)  (此处的$refs.demo的demo是给子组件起的 ref='demo')

   c 若想让自定义事件只触发一次 可以使用once修饰符 或$once方法

   触发自定义事件this.$emit('事件名',数据)

   解绑自定义事件this.$off('事件名')

   组件上也可以绑定原生DOM事件 需要使用native修饰符 @click.native="show"

   上面绑定自定义事件 即使绑定的是原生事件也会被认为是自定义的 需要加native 加了后就将此事件给组件的根元素

   注意: 通过 this.$refs.xxx.$on('事件名',回调函数) 绑定自定义事件时 回调函数要么配置在methods中 要么使用箭头函数 否则 this指向会出现问题 

第一种写法
               

 

 

第二种写法,使用ref

 

子组件中还是以$emit向父组件定义触发事件
父组件使用中定义子组件的ref属性进行获取
      

 

注意: 若想让自定义事件只能触发一次 可以使用once修饰符 或$once方法

触发自定义事件: this.$emit('方法名或者事件名',数据)
解绑自定义事件 this.$off('事件名')
组件上也可以绑定原生Dom事件 需要使用native修饰符
通过this.$refs.xxx.$on('方法名',回调) 绑定自定义事件时 回调要么配置在methods中 要么用箭头函数 否则this指向会出现问题

上述方法只适用于父子组件之间的传递,而不适合任意组件与任意组件之间的传递,比如兄弟组件之间的传递

## 任意组件之间的通信
**全局事件总线**
任意组件的通信vue中提供了全局事件总线来实现

一种可以在任意组件间通信的方式 本质上就是一个对象 必须满足以下条件\

    所有的组件都必须能看到它

   这个对象必须能够使用$on(绑定) $emit(触发) $off(解绑)方法去绑定 触发 和解绑事件

首先安装全局事件总线
       

 $bus就是当前应用的vm

 

 

 

消息订阅与发布
我们除了vue提供的全局事件总线外,我们还可以使用一些第三方库来实现任意组件之间的通信
这里我们使用消息订阅与发布的pubsub-js这个库来实现(消息订阅与发布的第三方库有多种,此处只演示一种,不同库之间的语法也不同)

首先安装第三方库: