• Vue3不支持eventBus


    $on、$off 和 $once 实例方法被删除。实例上不再实现这三个事件接口(核心就是事件触发与事件监听器功能的封装)。

    2.x 语法
    在2.x中,Vue 实例可以用事件API($on、$off 和 $once)强制附加的处理代码逻辑。这用于创建监听器功能,以创建在整个应用程序中使用的全局事件监听器:

    // eventHub.js

    const eventHub = new Vue()
    
    export default eventHub
    

      


    // ChildComponent.vue

    import eventHub from './eventHub'
    
    export default {
    mounted() {
    // adding eventHub listener
    eventHub.$on('custom-event', () => {
    console.log('Custom event triggered!')
    })
    },
    beforeDestroy() {
    // removing eventHub listener
    eventHub.$off('custom-event')
    }
    }
    

      

    // ParentComponent.vue

    import eventHub from './eventHub'
    
    export default {
    methods: {
    callGlobalCustomEvent() {
    eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
    }
    }
    }
    

      

    3.x 更新
    Vue3 从实例中完全删除了 $on、$off 和 $once 方法。$emit 仍然是现有API的一部分,因为它用于触发由父组件以声明方式附加的事件。

    第三方库
    Vue3不支持eventBus,那么官方推荐的做法是使用第三方库:

    mitt
    tiny-emitter

  • 相关阅读:
    【Rust】元组display
    【Rust】原始类型布尔
    【Rust】原始类型浮点
    【Rust】元组transpose
    【Rust】结构体
    【Rust】原始类型数组
    【Rust】结构体square
    【Rust】结构体area
    1月12日 家庭小账本(改) 开发记录
    1月18日 学习记录
  • 原文地址:https://www.cnblogs.com/ygunoil/p/15735958.html
Copyright © 2020-2023  润新知