首页 > Web开发 > 详细

用于Vue组件通信的工具库PubSub-js

时间:2019-06-09 12:37:10      阅读:233      评论:0      收藏:0      [点我收藏+]

使用该工具进行组件间通信的一个优点是组件可以隔代通信,不必像使用v-bind数据绑定一样,需要用prop逐层传递

这里简略介绍基本使用方法

场景 :孙组件需要触发爷爷组件中的函数 delete_data( comment ) ,comment为一个对象

技术分享图片

    // 子组件发布消息
    /* Todo.vue */
    methods : {
        delete_data(){ // 子组件私有函数
            if(window.confirm(`确认要删除吗`)){
            /* 发布消息 */
            PubSub.publish("delete_data", comment) // 参数一:消息名;参数二:需要传递的参数数据
        }
    }

    // 爷组件订阅消息
    /* App.vue */
    mounted() { //挂在后就订阅
        /* 订阅消息 */
        PubSub.subscribe('delete_data' , (msg , comment)=>{    // 参数一msg:暂时无关紧要,但是必须写;参数二:对应传递的数据
        this.delete_data(comment)    // 调用此组件里的函数
        // this.comments_data = this.comments_data.filter(item => item!=comment)
    })
    }

/**
*孙组件如果调用了含有发布消息的函数,订阅消息里的操作便会被触发,同时也会伴随组件数据以函数参数进行传递
*
**/

用于Vue组件通信的工具库PubSub-js

原文:https://www.cnblogs.com/peatechen/p/10993056.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!