我们之前学习的props接收参数,适用于父组件给子组件传递数据,那如果我们想要子组件给父组件传递数据呢?兄弟组件之间传递数据呢?今天我们就来学习一下其它方式的组件通信。
目录
一、组件的自定义事件
- 一种组件间通信的方式通信的方式,适用于:子组件 ==> 父组件
-
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A【父】中)。
-
绑定自定义事件:
-
第一种方式:在父组件中:<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所指定的回调函数中执行
好啦~这几种组件通信的方式今天就说到这里了,希望对大家有帮助吧!
拜比~