vue - 组件通信方式
父子组件通信
props / $emit
父组件通过 props 向子组件传递数据,子组件通过 $emit 和父组件通信
// 父组件
<List :data="data" @add="add"/>
// 子组件
import xxx for 'xxx'
export default {
components:{xxx},
props:['data'],
methods:{
addNum(){
this.$emit('add','添加的数据')
}
}
}
全局事件总线
一种组件通信的方式,适用于任意组件通信
安装全局事件总线:
new Vue({
...
beforeCreate(){
Vue.prototype.$bus = this // 安装时间总线
},
...
})
使用事件总线:
接收数据:A组件想接收数据,则在A组件中给¥bus绑定自定义事件,事件回调留在A组件自身
mounted(){
this.$bus.$on('xxx',()=>{})
}
提供数据:this.$bus.$emit('xxx',123)
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
消息发布与订阅
使用第三方库实现组件通信跟事件总线类似
安装npm i -S pubsub-js
也可以使用其他的库,这里推荐这个
订阅信息:
import pubsub from 'pubsub-js'
mounted() {
this.pubId = pubsub.subscribe('hello', (msg, data) => {
console.log(msg, data);
})
}
beforeDestroy() {
pubsub.unsubscribe(this.pubId) // 销毁订阅
}
发布信息:pubsub.subscribe('hello',666)
-
目录导航
公告
昵称:默永
园龄:2年333天
注册时间:2021-11-15
当前在第:1页
总共:1条
搜索
精品文章 48小时阅读排行