🚀
头像

默永


人生就像骑单车,想保持平衡就得往前走。

vue - 组件通信方式

2023-02-02 15:35:28 286 💗 0 @默永

父子组件通信

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)

    目录导航