Vue 3.0 事件API

发布时间:2024-10-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue 3.0 事件API脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

#概览

$on$off$once 实例方法已被移除,应用实例不再实现事件触发接口。

#2.x 语法

在 2.x 中,Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on$off$once),这用于创建 event hub,以创建在整个应用程序中使用的全局事件侦听器:

// eventHub.js


const eventHub = new Vue()


export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'


export default {
  mounted() {
    // 添加 eventHub listener
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // 移除 eventHub listener
    eventHub.$off('custom-event')
  }
}

// ParentComponent.vue
import eventHub from './eventHub'


export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event') // 如果ChildComponent mounted,控制台中将显示一条消息
    }
  }
}

#3.x 更新

我们整个从实例中移除了 $on$off$once 方法,$emit 仍然是现有 API 的一部分,因为它用于触发由父组件以声明方式附加的事件处理程序

#迁移策略

例如,可以通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt

在兼容性构建中也可以支持这些方法。

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 3.0 事件API全部内容,希望文章能够帮你解决Vue 3.0 事件API所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。