iview menu 封裝在一個(gè)頭部組件中 和父組件拼成的頁(yè)面 報(bào)on-select 綁定的方法無(wú)效

父組件
template:

  <div>
    <Top`請(qǐng)輸入代碼`
      :navbars="navbars"
      @toJump="toJump"
    />
    <div class="container">
      <router-view></router-view>
    </div>
  </div>

script:

  methods: {
    toJump (item) {
      console.log(item)
      this.$router.push({name: item})
    }
  }

子組件
template:

<div class="header-container">
      <div class="logBox"></div>
      <Menu class="navbar" mode="horizontal" active-name="activeName" theme="dark" @on-select="toJump">
        <Menu-item v-for="item in navbars" :key="item.id" :name="item.routerName">
          {{item.name}}
        </Menu-item>
      </Menu>
    </div>

script:

    methods: {
      toJump (name) {
        this.$emit('toJump', name)
      }
    }

頁(yè)面錯(cuò)誤：

如果不拆分頭部組件，則功能完好

  <div>
    <header class="header-container">
      <div class="logBox"></div>
      <Menu class="navbar" mode="horizontal" active-name="activeName" theme="dark" @on-select="toJump">
        <Menu-item v-for="item in navbars" :key="item.id" :name="item.routerName">
          {{item.name}}
        </Menu-item>
      </Menu>
    </header>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>

我想知道為什么，為什么，為什么 @ _ @
我感覺是vue對(duì)象的原因，但是不是很清楚到底什么原因
大神可以給我解答一下么？