Bootstrap vue-从vue组件修改导航栏

Question

我有一个Vue Bootstrap SPA，具有以下结构：

• 布局
  • 导航栏
  • 面包屑
  • 路由器视图
• 组件
  • 一些内容

我希望我的component将一个子菜单注入父级的导航栏。例如：

export default {
name: 'Component',
data() {
return {
menu: [
'Item': {
href: '#'
}
]
}
},
mounted() {
parent.menu.addItem(this.menu)
}
}

这样做可能吗？

这里的顶部布局：

<template>
<div>
<navbar :menu="menu"></navbar>
<router-view></router-view>
</div>
</template>
<script>
import NavBar from './navbar'
export default {
components: {
navbar: NavBar
},
data() {
return {
menu: [
{
text: "Foo",
href: "/foo",
},
{
text: "Bar",
href: "#",
},
],
};
},
};
</script>

Answer 1

您可以向父组件发出事件，如：

data() {
return {
menu: [
{
href: '#'
}
]
}
},
mounted() {
this.$emit('emit-menu',this.menu)
}

在父级中：

<template>
<navbar :menu="menu" @emit-menu="addItem"></navbar> 
<router-view></router-view>
</div>
</template>
<script>
import NavBar from './navbar'
export default {
components: {
navbar: NavBar
},
methods:{
addItem(menu){
this.menu=[..this.menu,...menu]
}
},
data() {
return {
menu: [
{
text: "Foo",
href: "/foo",
},
{
text: "Bar",
href: "#",
},
],
};
},
};
</script>