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

使用该工具进行组件间通信的一个优点是组件可以隔代通信,不必像使用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)
    })
    }

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

猜你喜欢

转载自www.cnblogs.com/peatechen/p/10993056.html