parent
template:
<div>
<Top``
: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})
}
} subcomponents
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)
}
}Page error:
if the header component is not split, the function is intact
<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> I want to know why, why, @ _ @
I think it"s the reason for the vue object, but I don"t know exactly why.
can you give me an answer?