vue - 组件通信方式

默永

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

vue - 组件通信方式

2023-02-02 15:35:28 306 💗 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)

目录导航

打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接

2023-02-02 15:35:28 0个人觉得很赞

发表评论

评论列表

博主

删除

点击加载更多

快来参与评论

公告

昵称：默永

园龄：3年9天

注册时间：2021-11-15

当前在第：1页

总共：1条

搜索

精品文章 48小时阅读排行

优秀文章 7天获赞排行