VUE | 组件通信

我们之前学习的props接收参数，适用于父组件给子组件传递数据，那如果我们想要子组件给父组件传递数据呢？兄弟组件之间传递数据呢？今天我们就来学习一下其它方式的组件通信。

目录

一、组件的自定义事件

二、全局事件总线（GlobalEventBus）

三、消息订阅与发布(pubsub)

四、nextTick

---

 

一、组件的自定义事件

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

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

3. 绑定自定义事件：

• 第一种方式:在父组件中：<Student v-on:atguigu='getStudentName'/> 或 <Student @atguigu='getStudentName'/>

• 第二种方式：在父组件中：

    <Student ref="student"/>  
    .......
    mounted(){
      this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件atguigu  
    } 

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

5.解绑自定义事件:this.$off('atguigu')

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

PS :

• getStudentName要在methods中提前准备好,接收子组件传来的数据
• 若想让自定义事件只触发一次，可以使用once修饰符，或$once方法
• 通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

二、全局事件总线（GlobalEventBus）

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

 2.安装全局事件总线：

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

 3.使用事件总线：

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

          methods(){
               demo(name,data){
               console.log('',data)
              } 
           },
           mounted(){
               this.$bus.$on('xxx',this.demo)
           }

2）提供数据：this.$bus.$emit('xxx',demo)  

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

三、消息订阅与发布(pubsub)

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

 2.使用步骤：

• 安装pubsub: npm i pubsub.js

• 引入 import pubsub from 'pubsub-js'

• 接收数据：接收方订阅消息

              methods:{
              demo(name,data){
                console.log('有人发布了hello消息，hello消息的回调执行了',data)
                }         
             },
              mounted(){       
              this.pubid =  pubsub.subscribe('hello',this.demo)

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

• 最好在beforDestory钩子中，用 pubsub.unsubscribe(this.pubid)去取消订阅

四、nextTick

1.语法：this.$nextTick(回调函数)

2.作用：在下一次DOM更新结束后执行其指定的回调

3.什么时候用：当改变数据后，要基本更新后的新DOM进行某些操作，要在nextTick所指定的回调函数中执行 

好啦~这几种组件通信的方式今天就说到这里了，希望对大家有帮助吧！

拜比~