Vue组件间的通信

组件间的通信

父组件向子组件传递

配置项props

1. 传递数据

   <Demo name = "xxx"/>
   

2. 接收数据

   第一种方式（只接收）：

   props:['name']
   

   第二种方式（限制类型）：

   props:{
       name:String
   }
   

   第三种方式（限制类型、限制必要性、限制默认值）：

   props:{
       name:{
           type:String,//类型
           required:true,//必要性
           default:'老王'//默认值
       }
   }

3. 备注

   props是只读的，Vue底层会检测你对props的修改，如果进行修改就会发出警告，若确实需要修改，那么将props数据复制一份到data，然后修改data中的数据。

子组件向父组件传递

组件自定义事件

1. 一种组件间通信的方式，适用于：子组件 ==> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件:                                                                                                                                   1.第一种方式，在父组件中：<Demo @test="test"/>或<Demo v-on:test="test"/>

    2.第二种方式，在父组件中：

   <Demo ref="demo"/>
   ......
   mounted(){
       this.$refs.xxx.$on('test',this.test)
   }

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

      4.触发自定义事件：子组件中this.$emit("test",数据)

      5.解绑自定义事件：this.$off("test")

      6.组件上也可以绑定原生DOM事件，需要使用native修饰符。

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

任意组件通信

全局事件总线

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

   new Vue({
       ...
       beforeCreate(){
           Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
       }
   })

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
          demo(data){...}
      }
      ......
      mounted(){
          this.$bus.$on('xxxx',this.demo)
      }

   2. 提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布(pubsub)

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

   2. 引入：import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

   methods(){
       demo(data){.....}
   }
   ......
   mounted(){
       this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
   }

4. 提供数据：pubsub.publish('xxx',数据)

5. 最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)取消订阅