vue-unicom

vue-unicom

• 它是 Vuejs 的一个插件，解决了 Vue 中非父子组件通讯的痛点。
• 它还可以使用在任意 JS 中，作为和 Vue 组件通讯的纽带
• 利用订阅者和发布者模式来管理消息

更新日志

• [2019-07-30]重构 vue-unicom，重构后代码逻辑更清晰
• [2019-07-31]优化注解，修复全局订阅问题以及一些多余代码删除
• TS改造移动到 rimjs实现
• [2021-04-28]支持vue3，不支持直接全局引入

功能

• 任意相对独立的 JS 之间的通讯（包括 Vue 组件以及 JS）
• 订阅需要初始化客户端，并且有自身的生命周期
• 当在 Vue 组件内，unicom 会自动注册，并将生命周期融合
• 全局监控支持（当监控到某个组件初始化后，会自动触发回调）

运行 demo

• vue-cli demo: https://github.com/szpoppy/vue-unicom-demo

获取 vue-unicom

• npm i vue-unicom -S

API

JS 中使用

import Unicom from "vue-unicom"
let unicom = new Unicom({
    // 绑定的对象
    target: {},
    // 实例唯一ID
    id: "id",
    // 实例分组，可以多个 字符串数组表示
    group:"group"
})

// 消息订阅
unicom.on("instruct", function({
    // emit时，第二个参数
    data,
    $1,
    // emit时，第三个参数，依次类推
    $2,
    // 触发emit的实例
    from,
    // new 时，绑定的对象
    target
}) {
    // ...
})

// 取消订阅 instruct 并且 回调为 这个函数的
unicom.off("instruct", fun)
// 取消 instruct 的全部订阅
unicom.off("instruct")
// 取消全部和unicom有关的订阅
unicom.off()

// 消息发布 返回event 同 上面的回调参数
let event = unicom.emit('instruct', arg1, arg2, ...)

// 消息发布到指定id
let event = unicom.emit('instruct#id', arg1, arg2, ...)

// 消息发布到指定group
let event = unicom.emit('instruct@group', arg1, arg2, ...)

// 获取命名为 id 的unicom
let that = unicom.emit('#id')

// 获取分组 group
let thats = unicom.emit('@group')

// 监控组件被命名为 id
unicom.monitor("#id", function(that){
    // that 命名为 id 的那个组件
    // ...
})
// 监控组件分组中包含 group
unicom.monitor("@group", function(that) {
    // ...
})

// 取消特定监控
unicom.monitorOff("#id", fun)
unicom.monitorOff("@group", fun)

// 取消指定所有监控
unicom.monitorOff("#id")
unicom.monitorOff("@group")

// 取消全部和unicom有关的监控
unicom.monitorOff()

main.js 注册 Unicom 插件

import Vue from 'vue'
import VueUnicom from 'vue-unicom'
Vue.use(VueUnicom, {
    // 默认为true，有时全局加入props参数会导致异常，比如 ant-design
    useProps: false,
    // 制定名称， 默认为 unicom
    name: 'unicom'，
    // 定制分组使用名称 默认为 unicom + 'Name'
    unicomName: 'unicomName',
    // 定制id使用名称 默认为 unicom + 'Id'
    unicomId: 'unicomId',
    // 定制vue中，发布emit方法， this['$' + unicomEmit] 默认为 unicom参数
    unicomEmit: 'unicom',
    // 定制 Vue中，全局访问的类名 默认为  unicom 参数，并将第一个字母大写
    unicomClass: 'Unicom'
})

其他关联 JS 中使用

// 提供 main.js 安装的插件
export default function install(Vue) {
    // 通过 Vue.Unicom 获取类
    let unicom = new Vue.Unicom()

    // 其他操作 参照 JS中使用方案
}

Vue 组件内部使用

{
    // 将这个组件归到group分组， 多个分组请使用字符串数组
    unicomName: 'group',
    // unicom 是组件内部订阅消息设置的
    unicom: {
        // 订阅消息 为 instruct
        instruct (event) {
            // event 参数参照上面《JS中使用》中的on方法回调参数
        }
    },
    method: {
        doExec () {
            // 发布订阅消息
            // instruct 本组件如果订阅，也能收到
            this.$unicom("instruct", arg1, arg2, ...)

            // 获取被命名为 id的组件引用
            // that 为unicom实例，that.target 为Vue的实例
            let that = this.$unicom("#id")

            // 获取分组为 group 的所有vue
            let thats = this.$unicom("@group")

            // 原始 unicom 对象的指向，不介意直接操作
            this._unicom_data_.self
        }
    }
}

Vue 组件实例化传参

<!-- 加入group分组 并且 将本组件命名为 id -->
<component unicom-name="group" unicom-id="id"></component>
<!-- 加入多个分组，请传入数组 -->
<component :unicom-name="['group1', 'group2']"></component>