Vue3 - TypeError:无法读取未定义的属性(读取'$on')

Question

利用vue3实现了在网页上记录的功能。程序也不例外，但是当我打开页面时，控制台会弹出这个错误: Uncaught (承诺) TypeError:无法读取未定义的属性(读取'$on')。错误是，当我点击任何按钮，我实际上工作(例如开始录制)，但它没有显示在网页上。以下是错误代码部分：

    mounted: function() {
      this.player = document.getElementById(this.playerUniqId)

      this.player.addEventListener('ended', () => {
        this.isPlaying = false
      })

      this.player.addEventListener('loadeddata', () => {
        this._resetProgress()
        this.duration = convertTimeMMSS(this.player.duration)
      })

      this.player.addEventListener('timeupdate', this._onTimeUpdate)

      this.$eventBus.$on('remove-record', () => {
        this._resetProgress()
      })
    }

Answer 1

首先，您的this.$eventBus是未定义的，因此您将得到该错误消息。

vue3中没有事件总线方法，所以不能使用$on、$off.它在vue2事件总线中提供。

关于正式文件的更多细节

如果您确实需要事件总线，请尝试使用mitt或tiny-emitter。它在正式文件中也提到，我提供了上面的链接。