javascript - 当改变时，为什么router的旧组件仍然是 '$on'并处理事件？

Question

emmmmm...说一下我遇到的情况吧。我有一个父组件，它有两个子组件，它们都接收相同的事件 并做相同的事情。(下面的代码):

mounted() {
 EventBus.$on('edit', (data) => {
  console.log('service called')
  this.showRightSide(data)
 })
},

showRightSide(data) {
  console.log(data)
  // display right-side operator edit page.
  this.$store.commit({
    type: 'setShownState',
    shown: true
  })
  // giving operator name & operator type
  this.$store.commit({
    type: 'setOptName',
    optName: data.name
  })
  this.$store.commit({
    type: 'setOptType',
    optType: data.type
  })
},

用下面的vue路由

{
  path: '/main',
  name: 'Main',
  component: Main,
  children: [
    { path: 'service', name: 'Service', component: ServiceContent },
    { path: 'model', name: 'Model', component: ModelContent }
  ]
},

在每个“编辑”事件期间应该有三个提交，不是吗？

事实上。首先它有 3 次提交。

但是当我从“/main/service”更改为“/main/model”时，它在每个“编辑”事件期间进行了 6 次提交(旧的 ServiceContent 组件仍然进行了 3 次提交，而新的 ModelContent 组件提供 3 次提交)。

当我回到“/main/service”时，9 次提交!!!

开发工具:

好像router-view改变了，老view的组件还是可以监听事件的，请问如何解决？(EventBus只是一个用作总线的全局vue实例)

Answer 1

当您调用 $on() 时，Vue 会在内部将您的回调函数注册为观察者。这意味着即使在卸载组件后，您的功能仍然存在。

您应该做的是在卸载组件时使用 $off。

例如

methods: {
  showRights (data) {
    // etc
  }
},
mounted () {
  EventBus.$on('edit', this.showRights)
},
beforeDestroy () {
  EventBus.$off('edit', this.showRights)
}